Firebase v3 Web Auth Complete Working Example
A fully functional example of Firebase v3 Web authentication. Sign in with Facebook, Github, Google, Twitter, password based, and anonymous accounts. The code is easy to read and follow and is well documented. The focus is on the fully functional authentication system.
Password based users are sent a validation link. They can also change their email address and password - both of these events send a verification email as an additional security measure.
Lastly, the difference between authentication, client side authorization, and server side authorization secured via Firebase Realtime Database Security Rules is demonstrated.
Live Fully Functional Demo
Setting up all 6 types of authentication took me quite a while so I decided to create a template that I could use as a starting point for my Firebase v3 Web applications. It occurred to me that I could share this with other developers.
The easiest way to install this code is to clone or download it. The following tasks must be done to get it working on your system.
Configure Your IDE 2. Create an HTML5 project. 3. Install Firebase Tools.
npm install -g firebase-tools4. Using Firebase Tools command line, login to your Firebase project.
firebase login --no-localhost5. Using Firebase Tools command line, setup a Firebase project in the current directory.
firebase init6. Clone this set of files and folders to your IDE.
git clone https://github.com/rhroyston/firebase-auth.git7. Using Firebase Tools command line, push your IDE project to your Firebase project.
firebase deploy8. View Firebase project in your browser. Any broken images or errors? Easy fix below. 8. You may need to update
background: urlin all JS, CSS, and all HTML files depending on your Web hosting folder structure . 1. Use Find feature to search for both
srcand update as necessary. 2. Browser Console will display any remaining incorrect paths errors. 3. Note script.js line 781
privateLink.href = "../firebase-auth/private"the
..seems to be required. 4. Once all pages render properly from Firebase Hosting (no broken images or console errors), continue.
- Enable all 6 forms of authentication. Follow the instructions on configuring social media site settings.
- Customize the Email Action Handler URL to point to your Firebase Web app URL + '/ack', e.g.
Login to Web app
- Login using an oAuth provider.
- From the browser command line, use the exposed
demo.update('mynode','myKey','myValue')method to add secure markup to your Realtime Database.
- A success message will show up in your browser console.
- You may need to update the
hrefpath to match your folder structure.
Firebase v3 Authentication and Authorization Demo Walkthrough
Login using each oAuth provider
- Notice that updating email address or password options are not present in your Account page.
- Notice any extra links in the side menu drawer?
- Try Deleting your account. What Happens?
Register as a Password based user
- Did you get a verification email?
- Can you view private data until you clicked the verification link?
- Can you change your password?
- Can you change your email address?
- Can you undo the email change by clicking the email change notification email revokation link?
- What links are present in the side menu drawer?
- Can you access private data?
- Can you view private data?
If you found a bug, have any questions or want to contribute please let me know, email@example.com.