Skip to content

Commit 4ea46d5

Browse files
MateoKrukMateoKruk
committed
README improvements
1 parent e0bf0e8 commit 4ea46d5

2 files changed

Lines changed: 62 additions & 37 deletions

File tree

‎.env.example‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,5 @@ REACT_APP_FIRE_BASE_STORAGE_BUCKET = ''
66
REACT_APP_FIRE_BASE_MESSAGING_SENDER_ID = ''
77
REACT_APP_FIRE_BASE_APP_ID = ''
88
REACT_APP_FIRE_BASE_MEASURMENT_ID = ''
9-
REACT_APP_CLOUD_FUNCTIONS_REST_API = '<FIREBASE_CLOUD_FUNCTIONS_URL>/requestsApp'
109
REACT_APP_LOGIN_PAGE_URL = 'http://localhost:3000/login'
1110
REACT_APP_FIRE_BASE_STORAGE_API = 'https://firebasestorage.googleapis.com/v0/b/${REACT_APP_FIRE_BASE_STORAGE_BUCKET}'

‎README.md‎

Lines changed: 62 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ Boilerplate with React ⚛️ and Firebase 🔥designed to quickly spin up a ful
1515
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
1616
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
1717

18+
1819
- [What is this?](#what-is-this)
1920
- [Why should I use it?](#why-should-i-use-it)
2021
- [Features](#features)
@@ -62,9 +63,16 @@ Boilerplate with React ⚛️ and Firebase 🔥designed to quickly spin up a ful
6263
- [Image resize extension](#image-resize-extension)
6364
- [Storage Rules](#storage-rules)
6465
- [Authentication via social media accounts](#authentication-via-social-media-accounts)
66+
- [How it works?](#how-it-works)
67+
- [Can I add more login methods?](#can-i-add-more-login-methods)
6568
- [Facebook](#facebook)
69+
- [Enabling Facebook with Firebase](#enabling-facebook-with-firebase)
70+
- [Facebook for developers App configuration](#facebook-for-developers-app-configuration)
71+
- [Continuing with the Firebase setup](#continuing-with-the-firebase-setup)
72+
- [Configure Facebook sign-in/sign-up for production](#configure-facebook-sign-insign-up-for-production)
6673
- [Google](#google)
6774
- [Microsoft](#microsoft)
75+
- [Azure App configuration](#azure-app-configuration)
6876
- [Contributors](#contributors)
6977
- [License](#license)
7078

@@ -631,15 +639,33 @@ service firebase.storage {
631639
632640
## Authentication via social media accounts
633641
634-
![Boilerplate - Login](https://i.imgur.com/xQz5pSR.png)
642+
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.
643+
644+
<p align="center">
645+
<img src="https://i.imgur.com/xQz5pSR.png">
646+
</p>
647+
648+
### How it works?
649+
650+
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.
651+
652+
### Can I add more login methods?
653+
654+
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).
635655
636656
### Facebook
637657
638-
Go to your [Firebase console](https://console.firebase.google.com/), select the proyect, then select Authentication on the Side Bar and Sign-in method. Click the Facebook logo, copy the OAuth redirect URI and keep this window open for later.
658+
#### Enabling Facebook with Firebase
659+
660+
1. Go to your [Firebase console](https://console.firebase.google.com/).
661+
2. Go to the "**Develop**" option and then click on "**Authentication**".
662+
3. Go to the tab "**Sign-in method**".
663+
4. Now select the "**Facebook**" option and copy the **_OAuth redirect URL_** provided by Firebase.
664+
5. Keep this window open because we need to configure the app on Facebook's developer site.
639665
640-
Before setting your App id and the App secret on the Facebook Sign-in from the Firebase console, you will need to Log-in into your [Facebook for developers](https://developers.facebook.com/) account, create an app and configure it to make Sign-in via Facebook available.
666+
#### Facebook for developers App configuration
641667
642-
**Facebook for developers App configuration**
668+
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.
643669
644670
<ol>
645671
<li>Name your App</li>
@@ -649,67 +675,67 @@ Before setting your App id and the App secret on the Facebook Sign-in from the F
649675
<li>Select Product Settings > Facebook Login config on the Side Bar</li>
650676
<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>
651677
<li>Select Configuration > Basic on the Side Bar</li>
652-
<li>There you got your App id and your App secret for setting them on your proyect from the Firebase console</li>
678+
<li>There you have your app id and your app secret for setting them on your project from the Firebase console</li>
653679
</ol>
654680
655-
**Facebook for developers App configuration on production**
681+
#### Continuing with the Firebase setup
656682
657683
<ol>
658-
<li>Select Configuration > Basic on the Side Bar</li>
659-
<li>Put your contact email and your privacy policy URL</li>
660-
<li>At the buttom of the page, select Website and change the URL for your domain</li>
661-
<li>Save Changes</li>
662-
<li>Turn on the "on Development" switch</li>
684+
<li>Go to the Firebase Console window we left open in the previous steps.</li>
685+
<li>Put the app id and the app secret we recieved from the last section.</li>
686+
<li>Enable the Facebook provider.</li>
663687
</ol>
664688
665-
**Firebase console**
689+
Now you have configured Facebook auth in you project.
690+
691+
#### Configure Facebook sign-in/sign-up for production
666692
667693
<ol>
668-
<li>Go to the Firebase Console window from the beggining</li>
669-
<li>Put the App id and the App secret</li>
670-
<li>Enable the Facebook provider</li>
671-
<li>Save</li>
694+
<li>Select Configuration > Basic on the Side Bar</li>
695+
<li>Put your contact email and your privacy policy URL</li>
696+
<li>At the buttom of the page, select Website and change the URL for your domain</li>
697+
<li>Save Changes</li>
698+
<li>Turn off the "on Development" switch</li>
672699
</ol>
673700
674-
For more on this [here](https://firebase.google.com/docs/auth/web/facebook-login).
701+
You can have a more in-depth look about Facebook login with Firebase [here](https://firebase.google.com/docs/auth/web/facebook-login).
675702
676703
### Google
677704
678-
For setting your Google authentication you will only need to go to your proyect 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.
705+
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.
679706
680-
For more on this [here](https://firebase.google.com/docs/auth/web/google-signin).
707+
You can have a more in-depth look about Google login with Firebase [here](https://firebase.google.com/docs/auth/web/google-signin).
681708
682709
### Microsoft
683710
684-
Go to your [Firebase console](https://console.firebase.google.com/), select the proyect, 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.
711+
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.
685712
686713
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.
687714
688-
**Azure App configuration**
715+
#### Azure App configuration
689716
690717
<ol>
691-
<li>Once you are logged to your account click the left, top corner and select Azure Active Directory</li>
692-
<li>Under Manage, select App registration</li>
693-
<li>Name your App</li>
694-
<li>Specify who can use the application</li>
695-
<li>Put your redirect URL (the one you copied in the past)</li>
696-
<li>Select Register</li>
697-
<li>Select Certificates & secrets from the Side Bar</li>
698-
<li>Select Add a new client secret</li>
699-
<li>Specify expiration time</li>
718+
<li>Once you are logged to your account click the left, top corner and select Azure Active Directory.</li>
719+
<li>Under Manage, select App registration.</li>
720+
<li>Name your App.</li>
721+
<li>Specify who can use the application.</li>
722+
<li>Put your redirect URL (the one you already copied).</li>
723+
<li>Select Register.</li>
724+
<li>Select Certificates & secrets from the Side Bar.</li>
725+
<li>Select Add a new client secret.</li>
726+
<li>Set the expiration time.</li>
700727
</ol>
701728
702729
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).
703730
704731
**Firebase console**
705732
706-
<li>Go to the Firebase Console window from the beggining</li>
707-
<li>Put the Application id, located on Overview on your Azure App </li>
708-
<li>Put Application secret, located on Certificates & secrets on your Azure App</li>
709-
<li>Enable the Microsoft provider</li>
710-
<li>Save</li>
733+
<li>Go to the Firebase Console window from the beginning</li>
734+
<li>Put the Application id, located on Overview on your Azure App.</li>
735+
<li>Put Application secret, located on Certificates & secrets on your Azure App.</li>
736+
<li>Enable the Microsoft provider.</li>
711737
712-
For more on this [here](https://firebase.google.com/docs/auth/web/microsoft-oauth).
738+
You can have a more in-depth look about Microsoft login with Firebase [here](https://firebase.google.com/docs/auth/web/microsoft-oauth).
713739
714740
## Contributors
715741

0 commit comments

Comments
 (0)