Authentication

We have provided third-party Authentication in our project. There are two types of Authentication modules are in our template i.e. firebase and auth0.

Here is step by step instructions to use both type of authentication in your template.

Authentication With Firebase

To add Firebase to your app, you'll need a Firebase project, Firebase SDK and a short snippet of initialisation code that has a few details about your project.

1. Create a Firebase project in the Firebase console, if you don't already have one.

   1. If you already have an existing Google project associated with your app, click Import Google Project. Otherwise, click Create New Project.

   2. If you already have apps in your project, click Add Another App from the project overview page.

2. Click Add Firebase to your web app.

3. Copy the initialisation code snippet, we will use this code in the next step.

4. Open the file src->firebase->index.js and search for the const config & paste the code inside it:

Firebase Initialisation

Removing Firebase Authentication

If you want to remove the firebase authentication from your existing template then please follow this link Completely Remove Firebase From Template and follow the steps given.

Authentication With Auth0-js

Reactify comes with Auth0 authentication. You can easily authorise user in your app. Here is step by step instructions to use auth0 in your app.

Auth0 SignIn Preview

Configure Callback URLs

A callback URL is a URL in your application where Auth0 redirects the user after they have authenticated.

You need to whitelist the callback URL for your app in the Allowed Callback URLs field in your Application Settings. If you do not set any callback URL, your users will see a mismatch error when they log in.

Open auth0-variables.js to configure callback url under the src->Auth directory. You also need to update the clientId & domain according to your account's configuration.

Auth0.js Config

You also need to add callback url in auth0 application settings.

Auth0 Application Settings

To get more information about Auth0 check the official document.

Removing Auth0 Authentication

Open the src->container->SigninFirebase.js file and search for the code session-inner-wrapper and comment the code given below:

SigninFirebase.js

{/* <FormGroup className="mb-15">
               <Button
                      variant="contained"
                      className="btn-info btn-block text-white w-100"
                      size="large"
                      onClick={() => this.loginAuth0()}
                >
                 Sign In With Auth0
                </Button>
</FormGroup> */}

Make sure you only commented out the Sign In With Auth0 Button only not the other ones.