Jumbo 5.0
Search…
⌃K

Authentication

How to implement authentication in your Next.js project.
In this section we will explain to setup authentication in your project.

Create a Restricted Page

To create a Restricted page (logged in user can access) wrap your page component by SecurePage component. like below example.
import React from 'react';
mport SecurePage from '../../authentication/auth-page-wrappers/SecurePage';
​
const DashboardPage = () => (
<SecurePage>
// write your component here.
</SecurePage>
);
​
export default DashboardPage;
​

Redirect User after login

We have implemented functionality to redirect user after login successfully in AuthPage component.
To change redirection path after user login go to authentication / auth-page-wrappers / AuthPage and update the following code.
useEffect(() => {
if (!loadingAuthUser && authUser) {
// change redirect user path here
router.push('/dashboard/crypto').then((r) => r);
}
​
return () => setError('');
}, [authUser, loadingAuthUser]);
​

Authentication Methods

We are proving two authentication method and base structure of auth methed (Basic Auth) in this template.
  1. 1.
    Firebase
  2. 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. 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. 2.
    Update Credentials To updated Firebase credentials, open config.js file placed at: authentication / auth-methods / firebase-auth / 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.
    const config = {
    apiKey: 'AIzaSyCYaTKjfam_qMXDnGfcdnBxScEq89VQtLk',
    authDomain: 'curious-sandbox-196209.firebaseapp.com',
    databaseURL: 'https://curious-sandbox-196209.firebaseio.com',
    projectId: 'curious-sandbox-196209',
    storageBucket: '',
    messagingSenderId: '1034032747860',
    };
  3. 3.
    Activate Firebase To activate Firebase open authentication / index.jsfile and update value like below example.
    // replace bwlow line
    import { useProvideAuth } from './auth-methods/basic-auth';
    ​
    // with
    import { useProvideAuth } from './auth-methods/firebase-auth';
    ​

JWT Auth

JWT auth is another auth method implemented in this template. To enable this method follow steps given below:
  1. 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. 2.
    Update Credentials To updated JWT Auth credentials, open config.js file placed at: authentication / auth-methods / jwt-auth / config.js
    In this file,update server user where your auth server is installed. see example:
    import axios from 'axios';
    ​
    export const httpClient = axios.create({
    baseURL: `http://g-axon.work/jwtauth/api/`, //YOUR_API_URL HERE
    headers: {
    'Content-Type': 'application/json',
    },
    });
  3. 3.
    Activate JWT Auth To activate JWT Auth open authentication / index.js file and update value like below example.
    // replace bwlow line
    import { useProvideAuth } from './auth-methods/basic-auth';
    ​
    // with
    import { useProvideAuth } from './auth-methods/jwt-auth';

Basic Auth

Basic auth us a base structure for auth method. You can use it for your custom Auth method.
You can find Basic Auth at here authentication / auth-methods / basic-auth
NEXT JS - Previous
Folder Structure
Next - Laravel Version
Environment Setup
Last modified 2yr ago