🔐Authentication

Our authentication flow uses the auth0 library.

Overview

Authentication is the process of verifying the identity of a user or system before granting access to specific resources or functionalities. It is a crucial component of web and application security, as it ensures that only authorized users are granted access to sensitive information or actions.

How to use

Here we use auth0. The installation method is as follows below.

The official auth0 documentation

Step 1: Set up Auth0 account and configure Auth0 application

The first step is to install the necessary dependencies for SEO in your app. You can do this using npm or yarn, depending on your preference. Here's the command to install the dependencies:

1. Go to the Auth0 website (https://auth0.com/) and sign up for a free account if you don't have one already.

2. Once you are logged in to Auth0, go to the "Applications" section and click on the "Create Application" button to create a new application.

3. Choose "Regular Web Applications" as the application type, and click on the "Create" button.

4. Enter a name for your application, and click on the "Create" button.

5. In the "Settings" tab of your Auth0 application, configure the following settings:

bashCopy codeAllowed Callback URLs: http://localhost:3000/api/auth/callback
Allowed Logout URLs: http://localhost:3000/
Allowed Web Origins: http://localhost:3000

Note: Replace http://localhost:3000 with your actual application URL if you are deploying it to a different environment.

1. Make note of the "Domain" and "Client ID" values, as you will need them in the next steps.

Step 2: Install and configure required dependencies

Install the required dependencies for authentication with Auth0 using the following commands:

yarn add @auth0/nextjs-auth0 jsonwebtoken jwks-rsa

Step 3: Create a .env file in the root of your project

Add the following environment variables with the values from your Auth0 application settings:

NEXT_PUBLIC_AUTH0_DOMAIN=<your_auth0_domain>
NEXT_PUBLIC_AUTH0_CLIENT_ID=<your_auth0_client_id>

Note: Replace your_auth0_domain and your_auth0_client_id with your actual Auth0 domain and client ID.

Step 4: Implement Auth0 authentication in application

1. Create a new file called auth0.ts in the src/services/auth0 directory of your boilerplate project.

2. In auth0.ts, add the following code to configure Auth0 with the environment variables from your .env file:

import { initAuth0 } from '@auth0/nextjs-auth0';

export default initAuth0({
  domain: process.env.AUTH0_DOMAIN,
  clientId: process.env.AUTH0_CLIENT_ID,
  redirectUri: 'http://localhost:3000/api/auth/callback',
  postLogoutRedirectUri: 'http://localhost:3000/',
  scope: 'openid profile',
  session: {
    cookieSecret: 'your_cookie_secret',
    cookieLifetime: 60 * 60 * 8, // 8 hours
    storeIdToken: false,
    storeAccessToken: false,
    storeRefreshToken: false,
  },
});

Note: Replace 'your_cookie_secret' with a random string of your choice for securing session cookies.

1. In your Next.js pages that require authentication, import and use the withAuth higher-order component from @auth0/nextjs-auth0 as follows:

import { withAuth } from '@auth0/nextjs-auth0';

// Your page component here

export default withAuth(MyPageComponent);

1. In your Next.js pages that need to check if a user is authenticated, you can use the useUser hook from @auth0/nextjs-auth0 as follows:

import { useUser } from '@auth0/nextjs-auth0';

// Your component logic here

const MyComponent = () => {
  const { user, isLoading, error } = useUser();

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  // Render your authenticated component logic here
};

export default MyComponent;

Step 5: Add authentication to API routes

To protect your Next.js API routes with authentication, you can use the requireAuthentication middleware from @auth0/nextjs-auth0 as follows:

import { requireAuthentication } from '@auth0/nextjs-auth0';

// Your API route handler here

const handler = (req, res) => {
  // Your API route logic here
};

export default requireAuthentication(handler);

Step 6: Add login and logout functionality

To add login functionality, you can use the login function from @auth0/nextjs-auth0 as follows:

import { login } from '@auth0/nextjs-auth0';

// Your login function here

const handleLogin = () => {
  login({ returnTo: '/dashboard' }); // Redirect to /dashboard after successful login
};

// Render your login button or link with handleLogin function

To add logout functionality, you can use the logout function from @auth0/nextjs-auth0 as follows:

import { logout } from '@auth0/nextjs-auth0';

// Your logout function here

const handleLogout = () => {
  logout({ returnTo: '/' }); // Redirect to / after successful logout
};

// Render your logout button or link with handleLogout function