Authentication

In this section we will explain to setup authentication in your project.
Use RestrictedRoute
Use RestrictedRoute to restrict the anonymous user from accessing any page which is only available for the authenticated user. This is fully explained in Defining New Route .
Redirect User to Dashboard after login
To redirect user to dashboard open  src / routes / index.js   file and update following code with replace code:
1
else if (authUser && location.pathname === '/signin') {
2
  return <Redirect to={'/dashboard'} />;
3
}
Copied!
Replace with
1
else if (authUser && (location.pathname === '/signin' || location.pathname === '/signup' || location.pathname === '/forgot-password')) {
2
  return <Redirect to={'/dashboard'} />;
3
}
Copied!
Authentication Methods
We are proving two authentication method and base structure of auth methed (Basic Auth) in this template.
1.Firebase
2.JWT Auth
Firebase
Firebase is one of authentication method which is implemented in this template.To enable this method for your project follow steps given below.
1.Configuring the App at Firebase official website
In order to use Firebase authentication service, firstly you need to configure your app at the Firebase official website. By configuring, you will get some credentials, you need to add that credentials in the application.
​
2.Update Credentials
To updated Firebase credentials, open config.js file placed at:
src/services/auth/firebase/config.js

In this file, you will find a constant object config which contains the credential properties, you need to add your credentials to those properties.
1
const config = {
2
  apiKey: 'YOUR_API_KEY',
3
  authDomain: 'YOUR_AUTH_domain',
4
  databaseURL: 'database_url',
5
  projectId: 'project_id',
6
  storageBucket: '',
7
  messagingSenderId: 'message_sender_id',
8
};
Copied!
3.Activate Firebase
To activate Firebase open  src / @jumbo / constants / AppConstants.js  file and update value like below example.
1
export const CurrentAuthMethod = 'firebase'; //jwtAuth,firebase,basic
Copied!
Now import Firebase in auth methods. Go to  src / services / auth /   and open index.js  file.
In this file import Firebase like below example:
1
import BasicAuth from './Basic';
2
import Firebase from './firebase';
3
​
4
export const AuhMethods = {
5
  basic: BasicAuth,
6
  firebase: Firebase,
7
};
Copied!
JWT Auth
JWT auth is another auth method implemented in this template. To enable this method follow steps given below:
1.Setup Auth Server
Very first step to enable JWT auth is setup your JWT auth server if not setup. We are providing laravel with JWT auth impletement in servers.zip file with this template when you buy Jumbo.

You can use that laravel setup server if you not have JWT auth server.

2.Update Credentials
To updated JWT Auth credentials, open config.js file placed at:
src/services/auth/jwt/config.js

In this file,update server user where your auth server is installed. see example:
1
import axios from 'axios';
2
​
3
export default axios.create({
4
  baseURL: `http://api.yuordomain.com/`, //YOUR_API_URL HERE
5
  headers: {
6
    'Content-Type': 'application/json',
7
  },
8
});
Copied!
3.Activate JWT Auth
To activate JWT Auth open  src / @jumbo / constants / AppConstants.js  file and update value like below example.
1
export const CurrentAuthMethod = 'jwtAuth'; //jwtAuth,firebase,basic
Copied!
Now import Firebase in auth methods. Go to  src / services / auth /   and open index.js  file.
In this file import JWT Auth like below example:
1
import BasicAuth from './Basic';
2
import JWTAuth from './jwt';
3
​
4
export const AuhMethods = {
5
  basic: BasicAuth,
6
  jwtAuth: JWTAuth,
7
};
Copied!
Basic Auth
Basic auth us a base structure for auth method. You can use it for your custom  Auth method.
​

Settings - Previous

Defining New Route

Next - Settings

RTL Support

Last modified 1yr ago

Copy link

Contents

Use RestrictedRoute

Redirect User to Dashboard after login

Authentication Methods

Firebase

JWT Auth

Basic Auth