You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In this boilerplate users have the option to login via e-mail and password but also they can sign-up/sign-in with their Facebook, Google and Microsoft accounts.
678
+
679
+
<p align="center">
680
+
<img src="https://i.imgur.com/xQz5pSR.png">
681
+
</p>
682
+
683
+
### How it works?
684
+
685
+
We implemented social media authentication using Firebase!. You can take a look at their documentation [here](https://firebase.google.com/docs/auth/web/google-signin). In the following section we will explain how to configure each of these authentication methods.
686
+
687
+
### Can I add more login methods?
688
+
689
+
Yes you can!. We already have the setup in place for more login methods like Twitter, GitHub, etc. You can add them without chaning much code at all. You can see other login methods provided by Firebase [here](https://firebase.google.com/docs/auth/web/start).
690
+
691
+
### Facebook
692
+
693
+
#### Enabling Facebook with Firebase
694
+
695
+
1. Go to your [Firebase console](https://console.firebase.google.com/).
696
+
2. Go to the "**Develop**" option and then click on "**Authentication**".
697
+
3. Go to the tab "**Sign-in method**".
698
+
4. Now select the "**Facebook**" option and copy the **_OAuth redirect URL_** provided by Firebase.
699
+
5. Keep this window open because we need to configure the app on Facebook's developer site.
700
+
701
+
#### Facebook for developers App configuration
702
+
703
+
Log-in/Sign-up into your [Facebook for developers](https://developers.facebook.com/) account, create an app and configure it to make Sign-in via Facebook available.
704
+
705
+
<ol>
706
+
<li>Name your App</li>
707
+
<li>Click on configure on Log in with Facebook</li>
708
+
<li>Choose the Web option </li>
709
+
<li>Select Web, set http://localhost:3000 as the URL</li>
710
+
<li>Select Product Settings > Facebook Login config on the Side Bar</li>
711
+
<li>Put your OAuth redirect URI (the one you copied in the past), you can verify your redirect URI at the buttom of this page</li>
712
+
<li>Select Configuration > Basic on the Side Bar</li>
713
+
<li>There you have your app id and your app secret for setting them on your project from the Firebase console</li>
714
+
</ol>
715
+
716
+
#### Continuing with the Firebase setup
717
+
718
+
<ol>
719
+
<li>Go to the Firebase Console window we left open in the previous steps.</li>
720
+
<li>Put the app id and the app secret we recieved from the last section.</li>
721
+
<li>Enable the Facebook provider.</li>
722
+
</ol>
723
+
724
+
Now you have configured Facebook auth in you project.
725
+
726
+
#### Configure Facebook sign-in/sign-up for production
727
+
728
+
<ol>
729
+
<li>Select Configuration > Basic on the Side Bar</li>
730
+
<li>Put your contact email and your privacy policy URL</li>
731
+
<li>At the buttom of the page, select Website and change the URL for your domain</li>
732
+
<li>Save Changes</li>
733
+
<li>Turn off the "on Development" switch</li>
734
+
</ol>
735
+
736
+
You can have a more in-depth look about Facebook login with Firebase [here](https://firebase.google.com/docs/auth/web/facebook-login).
737
+
738
+
### Google
739
+
740
+
For setting your Google authentication you will only need to go to your project from the [Firebase console](https://console.firebase.google.com/), then select Authentication on the Side Bar and Sign-in method. Click the Google logo, select a Project support email, enable the Google provider and save.
741
+
742
+
You can have a more in-depth look about Google login with Firebase [here](https://firebase.google.com/docs/auth/web/google-signin).
743
+
744
+
### Microsoft
745
+
746
+
Go to your [Firebase console](https://console.firebase.google.com/), select the project, then select Authentication on the Side Bar and Sign-in method. Click the Microsoft logo, copy the redirect URL and keep this window open for later.
747
+
748
+
Before setting your Application id and the Application secret on the Microsoft Sign-in method from the Firebase console, you will need to log-in into your [Azure](https://portal.azure.com/) account, create an app and configure it to make Sign-in via Microsoft available.
749
+
750
+
#### Azure App configuration
751
+
752
+
<ol>
753
+
<li>Once you are logged to your account click the left, top corner and select Azure Active Directory.</li>
754
+
<li>Under Manage, select App registration.</li>
755
+
<li>Name your App.</li>
756
+
<li>Specify who can use the application.</li>
757
+
<li>Put your redirect URL (the one you already copied).</li>
758
+
<li>Select Register.</li>
759
+
<li>Select Certificates & secrets from the Side Bar.</li>
760
+
<li>Select Add a new client secret.</li>
761
+
<li>Set the expiration time.</li>
762
+
</ol>
763
+
764
+
For more on [Register](https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-register-app) and [configure the app](https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-configure-app-access-web-apis).
765
+
766
+
**Firebase console**
767
+
768
+
<li>Go to the Firebase Console window from the beginning</li>
769
+
<li>Put the Application id, located on Overview on your Azure App.</li>
770
+
<li>Put Application secret, located on Certificates & secrets on your Azure App.</li>
771
+
<li>Enable the Microsoft provider.</li>
772
+
773
+
You can have a more in-depth look about Microsoft login with Firebase [here](https://firebase.google.com/docs/auth/web/microsoft-oauth).
774
+
663
775
## Contributors
664
776
665
777
We'd like to thank these awesome people who made this whole thing happen:
0 commit comments