---
description: >-
  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.
---

# Authentication

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](https://console.firebase.google.com/), 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](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LEnX6Q-u5Un7QWK152p%2F-LEnaVp0xEOQR-26RHYE%2Ffirebase-init.png?alt=media\&token=8db15911-651e-4d8d-8edd-fbaed398bda6)

### 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](https://iron-network.gitbook.io/reactify/faqs#how-to-completely-remove-firebase) 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](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LEnX6Q-u5Un7QWK152p%2F-LEnbJngs3CRtOEZ-jMt%2Fauth0-signin-preview.png?alt=media\&token=db167baf-f361-4d22-9b6d-5ce7adc17918)

**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](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LEnbXOCXXoPcHr7w_xs%2F-LEndtBFrNqWzl7h7FYE%2Fauth0-config.png?alt=media\&token=efc9bba5-3646-477f-ac3c-5dcdf0c36ba8)

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

![Auth0 Application Settings](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LEne4ayIu-eqIgcPDkM%2F-LEneHQCe8aN4863UD4r%2Fauth0-app-settings.png?alt=media\&token=a3d8cbe2-44f5-4c13-b68a-afdd0445c377)

To get more information about Auth0 check the official [document](https://auth0.com/).

### Removing Auth0 Authentication

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

{% code title="SigninFirebase.js" %}
```javascript
{/* <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> */}
```
{% endcode %}

{% hint style="warning" %}
Make sure you only commented out the _**Sign In With Auth0**_ Button only not the other ones.
{% endhint %}
