Giter VIP home page Giter VIP logo

firebaselink's Introduction

Firebase Email Link Authentication

Live Example at firebaselink.hightechtele.com

Summary

This code demonstrates implementation of Authenticate with Firebase Anonymously Using JavaScript paired with Authenticate with Firebase Using Email Link in JavaScript.

Users can add an apple to their shopping cart without having authenticated. This functionality is enabled by creation of an anonymous account and corresponding Firestore record with realtime listener attached.

Anonymous users can authenticate via an email link and have their shopping cart merged with their new authenticated account's cart via account linking, account deletion, and Firestore record deletion.

NOTE: An actual shopping cart implementation would likely include a cart field conatining the id of a cart which would be stored in a separate collection, i.e., this is an oversimplified shopping cart implementation.

Features

  • Account linking and Firestore record merging and finally deletion of orphaned account and record are explicitly coded.
  • URL query parameters in the email link are consumed and quickly stripped / erased from the URL bar via JavaScript.
  • Anonymous user accounts and associated Firestore records are orphaned upon signout, therefore we prompt anonymous users to confirm signout.

Prerequisites

Firebase's Firestore, Hosting, and Authentication systems. This code utilizes the async / await coding pattern therefore browser code shuold include a polyfill such as Babel's polyfill.js.

Installing

Paste your Firebase web project's specific configuration parameters into the top of the script.js file. Enable Anonymous and Email/Password authentication methods in your Firebase project. Edit the Action URL in the Authentication Template at firebase.google.com's Console. Strip off extraneous paths leaving the homepage only.

Running the Implementation

Test the behavior of the authentication system.

  1. Sign in with no apples in cart.
  2. Close page/browser then return to page. Are you still signed in?
  3. Sign Out.
  4. While signed out, add an apple (or several) to your cart. Notice you are now signed in as anonymous.
  5. Try and sign out. Notice you are prompted that you will lose changes, i.e. your apples/cart if you signout.
  6. From the anonymous state with apples in your cart, click sign in. What is your user uid after you have authenticated?
  7. Check your Firebase Console. Are the orphaned user account and Firestore record deleted?
  8. Sign in while already signed in. Notice how nothing changes.
  9. Sign in (using same email) from another device. Are your apples there in your cart?

Authors

License

It's free. No warranty.

firebaselink's People

Watchers

James Cloos avatar Ronnie Royston avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.