You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!
38 | Open Hosting Documentation 39 |Firebase SDK Loading…
41 | 42 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /firebase-authentication/01-intro.md: -------------------------------------------------------------------------------- 1 | # Introduction: Why Firebase Authentication? 2 | 3 | You need Firebase Authentication for two reasons: 4 | 5 | 1. Firebase Security Rules rely on Firebase Authentication 6 | 2. Firebase Authentication is ridiculously easy to use 7 | 8 | ## Firebase Auth + Security Rules 9 | 10 | Firebase needs a security system. In a traditional database you provide your own security using your 11 | API server. Since Firebase **Is** the API server, it needs a programmable way to control read and 12 | write access to your data. When users use your client apps to authenticate with Firebase 13 | Authentication they receive a [JSON Web Tokens](https://jwt.io/) that will identify them to 14 | Firebase's Security Rules system. We'll cover this more later. 15 | 16 | ## Ease Of Use 17 | 18 | Have you ever implemented your own auth system? Yes? Then you know how challenging it can be. If 19 | not... then take my word for it and use an off-the-shelf system. Firebase Authentication provides 20 | the following auth methods: 21 | 22 | * Email/password 23 | * Phone 24 | * OAuth 2 25 | * Google 26 | * Facebook 27 | * Twitter 28 | * Github 29 | * Anonymous 30 | * Custom auth 31 | 32 |  33 | 34 | All of these methods use [JSON Web Tokens](https://jwt.io/), also known as JWTs. 35 | 36 | > JWT is pronounced the same as the English word "jot". 37 | 38 | We'll cover JWTs later. Don't worry. They're relatively simple. 39 | 40 | ### Email/Password 41 | 42 | Email/password auth is exactly what it sounds like. You register an email address and a password 43 | with Firebase and it keeps track of your user account. 44 | 45 | ### Phone 46 | 47 | Google [acquired Twitter Digits](https://firebase.googleblog.com/2017/01/FabricJoinsGoogle17.html) 48 | in early 2017 and rolled their phone authentication into Firebase Authentication. This means that 49 | with minimum fuss you can implement a full SMS-based phone auth flow. This is particularly great for 50 | mobile web apps. Phone authentication is the preferred auth method for many users, especially those 51 | outside of the United States. 52 | 53 | ### OAuth 2 (Google, Facebook, Twitter, Github) 54 | 55 | OAuth is the fastest auth method, because it relies on accounts that your users already have. Most 56 | everyone has either Google, Facebook or Twitter, and developers love Github. OAuth 2 is also the 57 | easiest auth flow to implement. 58 | 59 | And all of the OAuth providers support 60 | [multi-factor authentication](https://en.wikipedia.org/wiki/Multi-factor_authentication), which we 61 | should all be using. 62 | 63 | ### Anonymous Auth 64 | 65 | You may want to interact with a client that hasn't authenticated. If you're developing a shopping 66 | cart feature for your app, you may want users to add items to their carts before they've created an 67 | account. This is where anonymous auth comes in. 68 | 69 | Without some sort of authentication, there's no way for your server to know who it's talking to. 70 | Firebase's data is either entirely open or requires authentication. Any private transaction between 71 | the Firebase database and a client app requires authentication or it will be public and could be 72 | intercepted by a malicious third party. 73 | 74 | There are situations in which you might make your data publicly accessible; however, user 75 | transactions with your database are unlikely to fit this model... and that's where anonymous auth 76 | comes in. 77 | 78 | We won't cover anonymous auth any further except to show how dead simple it is to execute: 79 | 80 | ```javascript 81 | firebase 82 | .auth() 83 | .signInAnonymously() 84 | .then(successHandler, errorHandler); 85 | ``` 86 | 87 | ### Custom Tokens 88 | 89 | Would you like to use a different authentication method with Firebase? That's not a problem. We 90 | won't cover custom tokens here except to say that you can use your auth server to mint Firebase auth 91 | tokens that you can give to your client applications. Those tokens will allow your client apps to 92 | authenticate with Firebase using whatever JWT you chose to create on your server. 93 | 94 | ## Link Multiple Auth Providers 95 | 96 | This is another topic we won't cover here. Just be aware that you can easily 97 | [link multiple auth providers to a single account](https://firebase.google.com/docs/auth/web/account-linking). 98 | 99 | For example, your user might register an email/password account and you could prompt her to link her 100 | account to Google and Facebook. Your client app can make a couple of easy calls to Firebase 101 | Authentication to initiate the linking procedure, and now your user can sign in with Google, 102 | Facebook, Twitter or Github. 103 | 104 | Alternatively, if your user signed up with an OAuth account, you can prompt her to register a linked 105 | email/password combination. 106 | -------------------------------------------------------------------------------- /firebase-authentication/02-configuration.md: -------------------------------------------------------------------------------- 1 | # Configuration: Let's get started! 2 | 3 | Your first step is to visit your Firebase Dashboard and select Develop > Authentication from the 4 | left nav bar. 5 | 6 | Now select the **SIGN-IN METHOD** tab and start enabling sign-in methods. 7 | 8 |  9 | 10 | Email/Password, Phone, Google and Anonymous auth can be enabled with a quick button click. The 11 | third-party providers--Facebook, Twitter and Github--will require a little more ceremony. You'll 12 | need to follow the instructions in the Firebase docs to register your app with the third-party 13 | provider. We'll cover the Facebook flow below. 14 | 15 | But quick! Before you get distracted, scroll down a bit and notice that Firebase requires you to 16 | approve the domains that you want to use with Firebase Authentication. Your Firebase Hosting domain 17 | will be there by default. So will 127.0.0.1 and localhost. Add any extra domains you hope to use. 18 | 19 | Also notice the **Advanced** options: 20 | 21 | * One account per email address 22 | * Manage sign-up quota 23 | 24 | I personally like to enable multiple auth methods for each email address. That enables my users to 25 | sign in with Google one day and Facebook the next. My app's business logic will notice the matching 26 | email addresses and provide them the same account data. 27 | 28 | Multiple accounts per email is harder to secure than requiring one account per email. If you require 29 | one account per email you can still prompt users to link accounts their other 30 | Google/Facebook/Twitter/Github accounts once they've logged in. 31 | 32 | I've just noticed that my users tend to forget how they logged in last time, so I like to 33 | automatically link accounts if possible. But yeah... that's extra work on my end, and it's possible 34 | that an attacker could steal a victim's email, add it to their Facebook account and use Facebook to 35 | log into my app :( 36 | 37 | Managing the sign-up quota is useful if you find that your app is getting spammed by fake sign-up 38 | attempts. This is rare :) 39 | 40 | ## Add a third-party OAuth provider 41 | 42 | We'll cover the Facebook flow below. Facebook may alter their developer site, so check the 43 | [Firebase docs](https://firebase.google.com/docs/auth/web/facebook-login) if you get confused. 44 | 45 | 1. [Create a developer account](https://developers.facebook.com/) with Facebook or log in to your 46 | existing account. 47 | 2. Create a new Facebook app. 48 | 3. Copy your App ID and App Secret 49 | 4. Paste your App ID and App Secret into the Firebase Dashboard 50 | 5. Copy the OAuth redirect URI from your Firebase Dashboard 51 | 6. Set up Facebook Login on Facebook's developer site 52 | 7. Paste your OAuth redirect URI from step 5 into Facebook's **Valid OAuth redirect URIs** field 53 | 54 | ### Screenshots: Add Facebook OAuth 55 | 56 |  57 | 58 |  59 | 60 |  61 | 62 |  63 | 64 |  65 | 66 |  67 | 68 | # Add Firebase Auth to your Web App 69 | 70 | This is the easy part. 71 | 72 | The Firebase SDK is typically added to a web page using a ` 124 | 125 | 126 |