Using Auth0

When providing member-specific information on an actual website, it is sometimes necessary to combine a login authentication mechanism to operate the site. Here, we introduce how to use Auth0.

What is Auth0?

Auth0 is a cloud-based service designed to simplify the authentication and authorization process. It allows developers to quickly integrate authentication features such as Single Sign-On (SSO), Multi-Factor Authentication (MFA), and social login into their applications. Using Auth0 can enhance security and improve user experience.

The main features of Auth0 are as follows:

Single Sign-On (SSO): Allows users to access multiple applications with a single login.
Multi-Factor Authentication (MFA): Provides an additional layer of security to prevent unauthorized access.
Social Login: Allows users to log in using their social media accounts such as Google, Facebook, and Twitter.
Customizable Authentication Flow: Allows customization of the authentication flow to meet the needs of the application.
Scalability: Supports projects ranging from small-scale to large enterprise applications.

By using Auth0, developers can reduce the time and effort required to implement authentication features and focus on the core functionality of their applications.

About the Free Plan

Auth0 offers a free plan. This free plan was expanded on September 24, 2024.

Auth0's free plan expanded. Up to 25,000 monthly active users, custom domains, and passwordless support with passkeys

Auth0 Takes “Free for Developers” to a New Level with More Users, More Security, Free MFA & Passwordless

The scope of the free plan is as follows. It is sufficient for testing and demo purposes.

Feature	Free
MAUs	25,000
Social Connections	Unlimited
Okta Connections	Unlimited
Organizations	5
Actions + Forms	3
Passwordless	OK
Custom Domain	OK

This time, we will apply for this free plan and create an account for use in demos.

Applying

To create an account, you can apply for the free plan on the pricing page of the Auth0 site by clicking the Start building for free button.

Pricing

Clicking the above button will switch to the Sign-up screen.

Sign-up

After entering your email address, the password setting screen will be displayed.

password

After setting the password, you will be asked to confirm the type of use.

Account type

The confirmation items for the settings will be displayed.

I need advanced settings

We’ve assigned your data region to the United States and given you a tenant name. Check this box If you need to process your data in a different region to comply with privacy laws.

If you want to use it outside the United States, you need to check and change it. This time, we will proceed without making any changes.

dashboard

Successfully, an account has been created from the website, and you can log in.

An email with a URL for email address verification has been sent to the login email address. Completing this will complete the account creation.

email check

Creating an Application

To use Auth0 authentication on a website, you first need to create an application on the Auth0 side. After logging in, proceed with the following screen.

Select Getting Started in the upper left corner and click the Create Application button.
Name the application Sitecore Demo and select Regular Web Application as the application type.
The integration with which technology will be displayed. The Next.js displayed here is just a tutorial for the App Router, so click Skip Integration.
Open Settings, and the application settings will be displayed as follows.
Scroll down the Settings to find the Application URIs settings. Set the following two values.
- Allowed Callback URLs: http://localhost:3000/api/auth/callback
- Allowed Logout URLs: http://localhost:3000
Click Save Changes to complete the application creation.

This prepares the environment variables for use with Next.js. The actual sample is as follows.

AUTH0_SECRET=KEY-VALUE
AUTH0_BASE_URL=http://localhost:3000
AUTH0_ISSUER_BASE_URL=Basic Information - domain
AUTH0_CLIENT_ID=Basic Information - Client ID
AUTH0_CLIENT_SECRET=Basic Information - Client Secret

Note that the AUTH0_SECRET is not obtained from the management screen but can be generated by running the following command.

node -e "console.log(crypto.randomBytes(32).toString('hex'))"

Next.js App Router

This time, we will use Next.js as the framework to use Auth0. Next.js allows you to choose between Pages Router and App Router implementations, but we will start with the App Router implementation. If you want to refer to the Pages Router implementation, skip this part.

Next.js Authentication By Example: Using App Router

Prerequisites

We will proceed with the following versions.

Next.js: 14.2.18
Typescript: Yes
App Router: Yes

Basic Settings

Install the package
Terminal window
```
npm install @auth0/nextjs-auth0
```

Create .env.local file

AUTH0_SECRET=KEY-VALUE
AUTH0_BASE_URL=http://localhost:3000
AUTH0_ISSUER_BASE_URL=Basic Information - domain
AUTH0_CLIENT_ID=Basic Information - Client ID
AUTH0_CLIENT_SECRET=Basic Information - Client Secret

Create src/app/api/auth/[auth0]/route.ts

import { handleAuth, handleLogin } from '@auth0/nextjs-auth0';

export const GET = handleAuth({
  login: handleLogin({
    returnTo: '/',
  }),
});

Add UserProvider in the src/app/layout.tsx file.

import localFont from "next/font/local";
import { UserProvider } from "@auth0/nextjs-auth0/client";

//

  return (
   <html lang="en">
    <body
      className={`${geistSans.variable} ${geistMono.variable} antialiased`}
    >
      <UserProvider>{children}</UserProvider>
    </body>

Create the login button src/components/buttons/login-button.tsx.
src/components/buttons/login-button.tsx
```
export const LoginButton = () => {
  return <a href="/api/auth/login">Log In</a>;
};
```

Create the logout button src/components/buttons/logout-button.tsx.

import { Button } from '@chakra-ui/react';

export const LogoutButton = () => {
  return (
    <Button as="a" href="/api/auth/logout" marginX={1}>
      Log Out
    </Button>
  );
};

Create the navigation for the login and logout buttons src/components/navigation/nav-bar-buttons.tsx.

'use client';

import { useUser } from '@auth0/nextjs-auth0/client';
import React from 'react';
import { LoginButton } from '@/components/buttons/login-button';
import { LogoutButton } from '@/components/buttons/logout-button';

export const NavBarButtons = () => {
  const { user } = useUser();

  return (
    <>
      <div className="nav-bar__buttons">
        {!user && (
          <>
            <LoginButton />
          </>
        )}
        {user && (
          <>
            <LogoutButton />
          </>
        )}
      </div>
    </>
  );
};

Finally, add the navigation to the sample page.

import { NavBarButtons } from "@/components/navigation/nav-bar-buttons";
import Image from "next/image";

export default function Home() {
  return (
   <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
      <header>
        <NavBarButtons />
      </header>
    <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
      <Image

This completes the setup. When executed, it will work as shown below.

In addition to login and logout, it is also possible to add a sign-up feature. The steps are as follows.

Create the sign-up button src/components/buttons/signup-button.tsx.
src/components/buttons/signup-button.tsx
```
export const SignupButton = () => {
  return <a href="/api/auth/signup">Sign Up</a>;
};
```

Add the sign-up action to src/app/api/auth/[auth0]/route.ts.

import { handleAuth, handleLogin } from "@auth0/nextjs-auth0";

export const GET = handleAuth({
  login: handleLogin({
    returnTo: "/",
  }),
  signup: handleLogin({
    authorizationParams: {
      screen_hint: "signup",
    },
    returnTo: "/",
  }),
});

Add the sign-up button to the navigation.

import { LogoutButton } from "@/components/buttons/logout-button";
import { SignupButton } from "@/components/buttons/signup-button";

export const NavBarButtons = () => {
  const { user } = useUser();

  return (
   <>
    <div className="nav-bar__buttons">
      {!user && (
       <>
            <SignupButton />
        <LoginButton />
       </>
      )}

From the Auth0 management screen, select Branding - Universal Login, and in the Advanced Options settings screen, make sure Universal Login is enabled.

This completes the button setup. When you start it, the Sign-up option will be added as shown below.

Sign-up Clicking will switch to the sign-up screen.

Sign-up dialog

This completes the implementation of basic Auth0 functionality in the Next.js App Router.

The created sample can be referenced in the following repository.

haramizu / Next.js-sample Sample - Next.js App Router with Auth0

Next.js Pages Router

In the Next.js Page Router, it is possible to mix with the App Router, so we will proceed with the steps including the work specific to the Pages Router while reproducing the work of the App Router as it is.

Prerequisites

This time, we will proceed with the following versions.

Next.js: 14.2.18
Typescript: Yes
App Router: No

The project was created as follows.

Next.js