Firebase - Authentication
Allows you to manage the user authentication on Firebase.
How to Install Firebase for Authentication?
The process of Firebase Authentication installation involves some simple steps which we have covered in depth. First, we will use an API key from Firebase Console to install the Firebase Auth plugin and then we will test how the authentication via Firebase works.
1. Go to Plugins
Go to the left toolbar and click on the Plugins options. It will redirect you to the Plugins page that contains all the plugins.
2. Click the Install Button
After landing on the plugins page, scroll down and find the Firebase plugin. Then, click on the Install button.
3. Plugin Settings
As you click on the install button, you will be redirected to the plugin settings of Firebase. Now get the app ID from your Firebase account.
4. Login to Your Firebase Account
To install Firebase, the app ID is mandatory. So, go to Firebase's official website and sign in to your Firebase account.
5. Open a Project
After signing in to your Firebase account, you will land on a page that showcases all your projects. Now open a project of your choice or create a new one if you don't have one.
6. Project Settings
After opening a project, you land on its dashboard. Click on the settings icon in the sidebar, then click on Project Settings.
7. Copy the API Key
Scroll down on the Project Settings page and go to app info. Copy the API Key as shown below.
8. Paste the API Key
Now go back to the builder and paste the copied API Key in the App ID field of the plugin installation form. Then, click on the Install Plugin button.
The installed plugin will appear on the plugins page after the successful installation.
Pages, Collections & Events Added with Plugin Installation
1. Signup & Login Pages
Once you have successfully installed the plugin, refresh the page and go to the pages panel in the left toolbar. You will find two new pages: Firebase Signup/Register & Firebase Login
2. Role & User Collections
Along with pages, two collections will also get added in your collection panel. The role collection allows you to add different user and admin roles. The user collection will contain all the data of users who have signed up.
3. Signup & Login Events
The workflow events to signup and login get added as well.
Authentication Settings
You have to enable sign up/login authentication settings from the Firebase console, so that you can add users directly from the Firebase console and login to your web app on DrapCode without signing up.
1. Open Authentication
Go back to your Firebase console and open Authentication page by click on the option Authentication in gthe sidebar.
2. Get Started
After landing on the authentication page, click on the Get Started button.
3. Open Sign-in Method Tab
As you click the Get Started button, you will land on the Users tab. So, go to the Sign-in Method Tab to access email/Password settings.
4. Email/Password
Among different options, click on Email/Password option.
5. Enable Settings
Click on the blue button and enable the Email/Password and Email Link, so that users added directly via Firebase console can be used to login the web app.
Execution/Outcome
Here are two scenarios. First, you can signup via web app and the signup credentials will appear in the Firebase Console. Second, create user credentials directly on the Firebase Console and then use them to login the web app.
Sign Up via Web App
1. Signup/Register
Now open the sign up page in preview or publish mode and create a user and use those credentials to login.
2. Login to Web App
Afer signing up, use those credentials to login to your web app as shown below.
3. Added User on Firebase Account
Go to your Firebase Console and open the Users tab on the Authentication page. Refresh the page once and the credentials you had created via sign up will reflect.
Sign Up via Firebase
1. Click the Add User Button
Click the Add User button on the Users page under Authentication on the Firebase Console.
2. Add a User from Firebase
Add the email address and the password. Once done, click the Save button.
The newly added user will appear in the users page as shown below:
2. Login Using New Credentials
Go to your web app's Firebase login page and add the newly created credentials to log into your web app.
