deepu-sasidharan

Deepu is a polyglot developer, Java Champion, and OSS aficionado. He mainly works with Java, JS, Rust, and Golang. He co-leads JHipster and created the JDL Studio and KDash. He's a Staff Developer Advocate at Okta. He is also an international speaker and a published author.

Staff Developer Advocate

Deepu K Sasidharan

Learn how to build a tool-calling AI agent using LangGraph, Vercel AI SDK, and Next.js. Integrate different kinds of tools into them. Use Google services like Gmail, Calendar, and Drive as tools secured using Auth0 Token Vault.

**AI agents** and **Operators** are the next big things in software development. In a [previous post](https://auth0.com/blog/genai-tool-calling-intro/), we discussed how AI agents are taking center stage by seamlessly integrating with multiple digital tools to be more efficient. In this post, we will build a personal assistant that can use different types of tools. Both simple unauthenticated tools and more complex authenticated tools like Gmail, Calendar, and Google Drive.

If you haven't read the previous post, I recommend you do so before continuing to better understand tool calling in AI agents and how security is currently handled.

<include
 src="LinkCard"
 title="Tool Calling in AI Agents: Empowering Intelligent Automation Securely"
 link="https://auth0.com/blog/genai-tool-calling-intro/"
 description="Discover how AI agents are taking center stage by seamlessly integrating with multiple digital tools to be more efficient. Learn why it is important to secure them."
 img="https://images.ctfassets.net/23aumh6u8s0i/4LrNhImjPcdPVpmCIrhlG9/4efed8dfb26630e6cf48b4a478a1f550/genai-tool-calling-intro.png"
/>

To keep this post focused on tool calling, we will only focus on the AI agent part, not the UI. Each tutorial step, including building the UI, can be found as a distinct commit in the [GitHub repository](https://github.com/auth0-samples/auth0-assistant0).

## Technology Stack

We will use a [Next.js](https://nextjs.org/) application called **Assistant 0** as the base. Assistant 0 is an AI personal assistant that consolidates your digital life by dynamically accessing multiple tools to help you stay organized and efficient.

Apart from Next.js, we mainly use the following technologies:

- [LangGraph.js](https://langchain-ai.github.io/langgraphjs/) and [LangChain's JavaScript framework](https://js.langchain.com/docs/introduction/) for building agentic workflows.
- [LangChain community tools](https://js.langchain.com/docs/integrations/tools/).
- Vercel's [AI SDK](https://github.com/vercel-labs/ai) to stream response tokens to the client and display the incoming messages.
- The [Auth0 AI SDK](https://github.com/auth0-lab/auth0-ai-js) and [Auth0 Next.js SDK](https://github.com/auth0/nextjs-auth0) to secure the application and call third-party APIs.

## Prerequisites

> **You will need the following tools and services to build this application**:
>
> - [Bun v1.2](https://bun.sh/) or [NodeJS v20](https://nodejs.org/en/download)
> - An Auth for GenAI account. [Create one](https://a0.to/ai-content).
> - An OpenAI account and API key. [Create one](https://platform.openai.com) or use any [other LLM provider supported by LangChain](https://js.langchain.com/docs/integrations/llms/).
> - A SerpAPI account and API key. [Create one](https://serpapi.com/).
> - A Google account for Gmail, Calendar, and Drive. Preferably a new one for testing.

## Getting Started

First clone [the repository](https://github.com/auth0-samples/auth0-assistant0) and install the dependencies:

```bash
git clone https://github.com/auth0-samples/auth0-assistant0.git
cd auth0-assistant0
git switch step-1 # so that we skip building the UI and get straight to the AI agent

bun install # or npm install
```

Next, you'll need to set up environment variables in your repo's `.env.local` file. Copy the `.env.example` file to `.env.local`. To start, you'll just need to add your OpenAI API key.

Now, start the development server:

```bash
bun dev # or npm run dev
```

Open `http://localhost:3000` with your browser to see the result! Ask the agent something, and you'll see a streamed response.

![Assistant 0](https://images.ctfassets.net/23aumh6u8s0i/ePzgV9PLYqmwdsqdJC2VU/3507e783ee8199b6a5599742ef81fed7/assistant-0.png)

### A Peek into the Code

The application is structured as follows:

- `src/app`: Contains the Next.js application routes, layout, and pages.
- `src/app/page.tsx`: Home page with chat interface.
- `src/app/api/chat/route.ts`: API route for handling chat requests. This is where the AI agent is defined.
- `src/components`: UI components used in the application.
- `src/lib`: Services and configurations. This is where custom tools will be defined.
- `src/utils`: Utility functions

Let's take a look at the `src/api/chat/route.ts` file where the AI agent is defined.

```js
// src/api/chat/route.ts
// ...
const AGENT_SYSTEM_TEMPLATE = `You are a personal assistant named Assistant0.
You are a helpful assistant that can answer questions and help with tasks.
You have access to a set of tools, use the tools as needed to answer the user's question.`;

export async function POST(req: NextRequest) {
  // ... Process the request and get messages
  // Create a new OpenAI chat model
  const llm = new ChatOpenAI({ model: "gpt-4", temperature: 0 });
  const tools = [];
  // Use a prebuilt LangGraph agent.
  const agent = createReactAgent({
    llm,
    tools,
    messageModifier: new SystemMessage(AGENT_SYSTEM_TEMPLATE),
  });
  // Stream back all generated tokens and steps from their runs.
  const eventStream = agent.streamEvents({ messages }, { version: "v2" });
  // Log tool calling data. Only in development mode
  const transformedStream = logToolCallsInDevelopment(eventStream);
  // Adapt the LangChain stream to Vercel AI SDK Stream
  return LangChainAdapter.toDataStreamResponse(transformedStream);
}
```

The route uses a prebuilt LangGraph agent and OpenAI chat model. No tools are defined yet; we will add them in the next section.

Here is a high-level architecture of the application with the tools we will be adding in this post.

![Assistant 0 architecture](https://images.ctfassets.net/23aumh6u8s0i/6ZTtsivmBOPUmKGWx479Xm/d8d90c3bf3f24f1c8ce99ff703a1ba7d/architecture.jpg)

Now that the base application is running, let's start building our personal assistant with tool-calling capabilities.

## Add Tools to the Assistant

If you recall the previous post, we discussed authenticated and unauthenticated tools. Let's start with an unauthenticated tool and then proceed to add more complex tools like Gmail, Calendar, and Google Drive.

### Add a Calculator Tool

We will start with a simple calculator tool from the LangChain community tools to perform basic arithmetic operations.

Install the `@langchain/community` package.

```bash
bun add @langchain/community # or npm i @langchain/community
```

Update the `src/api/chat/route.ts` file with the following code.

```js
// src/api/chat/route.ts
import { Calculator } from "@langchain/community/tools/calculator";
// ...
export async function POST(req: NextRequest) {
  // ...
  const tools = [new Calculator()];
  // ...
}
```

It's that simple! Now, try asking the assistant to perform some calculations. For example, `what is (2+56) x 200`. You should see the answer in the UI. If you check the console where Next.js dev server (`bun dev`) is running, you should see the tool calling data like below.

```bash
Tool calls state: {
 "call_E3Za9klJcJ5TADWiMj8XfjdB": {
   "name": "calculator",
   "args": "{\n  \"input\": \"(2+56) * 200\"\n}"
 }
}
POST /api/chat 200 in 8382ms
```

### Add a Web Search Tool

Now let's add a web search tool to search the web for information. Let's use [SerpAPI](https://serpapi.com/) for this. It's an authenticated tool. But since this is going to be API usage and not a user impersonation, we can simply use an API key.

First, get an API key from SerpAPI and add that to your `.env.local` file.

```bash
SERPAPI_API_KEY=your-api-key
```

Now, update the `src/api/chat/route.ts` file with the following code.

```js
// src/api/chat/route.ts
import { SerpAPI } from "@langchain/community/tools/serpapi";
// ...
export async function POST(req: NextRequest) {
  // ...
  const tools = [new Calculator(), new SerpAPI()];
  // ...
}
```

Again, quite simple! Now try asking the assistant to search the web for information. For example, `What is the top 10 news today?`. You will see the response in the UI.

![Assistant 0 web search](https://images.ctfassets.net/23aumh6u8s0i/h4hWDQwBBTUiDh6gdaVET/137647c87dd51c6cc34ec0a44d6e453d/assistant-0-web-search.png)

If you check the console, you should see the tool calling data like the one below.

```bash
Tool calls state: {
 "call_e8vqAPW45vMsUbFiIF9SW5Yn": {
   "name": "search",
   "args": "{\n  \"input\": \"top 10 news today\"\n}"
 }
}
POST /api/chat 200 in 15443ms
```

This corresponds to the `step-2` branch in case you want to double-check your code.

```bash
git switch step-2
```

### Add Gmail Tools

Now, let's get into business. I know you are here for this part, not to learn about adding calculators and web search tools. But before we can add a Gmail tool, we need to add Auth0 authentication to the application since we will be using Auth0's [Token Vault](https://auth0.com/docs/secure/tokens/token-vault) feature to get access tokens to call the Gmail API via a tool.

#### Add Auth0 Authentication

First, let's add Auth0 as the authentication provider to the application.

Follow the [Auth0 Next.js quickstart guide](https://auth0.com/ai/docs/user-authentication) to set up the application.

> If you want to create the Auth0 application manually, create a new application (Type: **Regular Web App**, Callback URL: `http://localhost:3000/auth/callback`) and get the **client ID** and **client secret**.

Update the `.env.local` file with credentials, and create the `src/lib/auth0.ts` and `src/middleware.ts` files.

If you want to skip to the next step, check out the `step-3` branch. The [full changelog for this step is on GitHub](https://github.com/auth0-samples/auth0-assistant0/commit/9a6db1ec49511afa7c361080c3f5a1854ee8efe5).

```bash
git switch step-3
```

#### Configure Auth0 for Gmail

To use Gmail API with Auth0 via a Google Social Connection, you need to do the following:

- Create Google OAuth 2.0 credentials
- [Enable Gmail API](https://console.cloud.google.com/apis/library/gmail.googleapis.com) for the credentials
- Configure Gmail social connection in Auth0

You can follow the [Google Sign-in and Authorization](https://auth0.com/ai/docs/google-sign-in-and-auth) guide from Auth0 to configure this.

#### Configure Auth0 AI SDK

First, install the `@auth0/ai-langchain` package from [Auth0 AI SDK](https://github.com/auth0-lab/auth0-ai-js).

```bash
bun add @auth0/ai-langchain # or npm i @auth0/ai-langchain
```

Update `src/lib/auth0.ts` with the following code.

```js
// src/lib/auth0.ts
// ...
export const auth0 = new Auth0Client({
  // this is required to get federated access tokens from services like Google
  authorizationParameters: {
    access_type: "offline",
    prompt: "consent",
  },
});

// Get the refresh token from Auth0 session
export const getRefreshToken = async () => {
  const session = await auth0.getSession();
  return session?.tokenSet?.refreshToken;
};
```

Create a new `src/lib/auth0-ai.ts` file with the following code.

```js
// src/lib/auth0-ai.ts
import { Auth0AI } from "@auth0/ai-langchain";
import { getAccessTokenForConnection } from "@auth0/ai-langchain";
import { getRefreshToken } from "@/lib/auth0";

// Get the access token for a connection via Auth0
export const getAccessToken = async () => getAccessTokenForConnection();

const auth0AI = new Auth0AI();

// Connection for Google services
export const withGoogleConnection = auth0AI.withTokenForConnection({
  connection: "google-oauth2",
  scopes: [],
  refreshToken: getRefreshToken,
});
```

#### Add Gmail Search Tool

We can add Gmail tools now that we have Auth0 authentication in place. Let's start with a Gmail search tool. This tool will allow the assistant to search for emails in the user's Gmail account.

First, we need to get an access token for the Gmail API. We can get this using the [Auth0 Token Vault](https://auth0.com/docs/secure/tokens/token-vault) feature.

Update `src/lib/auth0-ai.ts` with the required scopes.

```js
// src/lib/auth0-ai.ts
// ...
export const withGoogleConnection = auth0AI.withTokenForConnection({
  // ...
  scopes: ["https://www.googleapis.com/auth/gmail.readonly"],
  // ...
});
```

Install the `googleapis` package.

```bash
bun add googleapis # or npm i googleapis
```

Import the `GmailSearch` tool from LangChain community tools and update the `src/api/chat/route.ts` file with the following code.

```js
// src/api/chat/route.ts
import { GmailSearch } from "@langchain/community/tools/gmail";
import { withGoogleConnection, getAccessToken } from "@/lib/auth0-ai";
// ...
export async function POST(req: NextRequest) {
  // ...
  // Update the LLM model to gpt-4o-mini to support a larger context window
  const llm = new ChatOpenAI({
    model: "gpt-4o-mini",
    temperature: 0,
  });
  // Provide the access token to the Gmail tools
  const gmailParams = {
    credentials: {
      accessToken: getAccessToken,
    },
  };
  const tools = [
    // ... existing tools
    withGoogleConnection(new GmailSearch(gmailParams)),
  ];
  // ...
}
```

We are all set! Now, try asking the assistant to search for emails. For example, `What is the latest unread email?`. You should see the response in the UI.

![Assistant 0](https://images.ctfassets.net/23aumh6u8s0i/14n2drq2woolLeJybBMWk6/3bbc575f92493dc2322f485a6b4f4ac9/assistant-0-gmail-search.png)

If you check the console, you should see the tool calling data like the one below.

```bash
Tool calls state: {
 "call_rCzcZRjueyD8p2kzTmeZMiSK": {
   "name": "search_gmail",
   "args": "{\"query\":\"is:unread\",\"maxResults\":1,\"resource\":\"messages\"}"
 }
}
POST /api/chat 200 in 10892ms
```

#### Add Gmail Draft Tool

We will add a Gmail draft tool next. This tool will allow the assistant to draft emails on behalf of the user.

Update `src/lib/auth0-ai.ts` with the required scopes.

```js
// src/lib/auth0-ai.ts
// ...
export const withGoogleConnection = auth0AI.withTokenForConnection({
  // ...
  scopes: [
    // ... existing scopes
    "https://www.googleapis.com/auth/gmail.compose",
  ],
  // ...
});
```

Update the `src/api/chat/route.ts` file with the following code.

```js
// src/api/chat/route.ts
import { GmailCreateDraft } from "@langchain/community/tools/gmail";
// ...
export async function POST(req: NextRequest) {
  // ...
  const tools = [
    // ... existing tools
    withGoogleConnection(new GmailCreateDraft(gmailParams)),
  ];
  // ...
}
```

Now, ask the assistant to draft an email. For example, `Draft an email to John Doe about the meeting tomorrow.` You should see the response in the UI.

![Assistant 0](https://images.ctfassets.net/23aumh6u8s0i/hWz4f6iUXTacbCNoqxwLz/c16c70d786027012b4c4944639339999/assistant-0-gmail-draft.png)

If you check the console, you should see the tool calling data like the one below.

```bash
Tool calls state: {
"call_pPAk6rFYJSSyAuYkNWFf5KYX": {
  "name": "create_gmail_draft",
  "args": "{\"message\":\"Hi John,\\n\\nI hope this message finds you well. I wanted to … [Your Name]\",\"to\":[\"john.doe@example.com\"],\"subject\":\"Meeting Reminder\",\"cc\":[],\"bcc\":[]}"
}
}
POST /api/chat 200 in 7594ms
```

You can find the [full changelog of these two steps on GitHub](https://github.com/auth0-samples/auth0-assistant0/commit/020f90f9ca85824f9cf99a82986a91bf72625041).

This corresponds to the `step-4` branch in case you want to double-check your code.

```bash
git switch step-4
```

## Learn more about AI Agents and Auth for GenAI

You have successfully built an AI personal assistant that can search the web, search your emails, and draft emails. In the next chapters, we will switch to a more production-ready architecture and add more tools like User Info, Google Calendar, Google Drive, and Slack to the assistant.

This tutorial is part of a series of posts on tool-calling Agents with [Auth for GenAI](https://a0.to/ai-content). We learned how to add tools to an AI agent and how to secure them using Auth0.

Sign up for [Auth for GenAI in Developer Preview](https://a0.to/ai-content).

Before you go, we have some great news to share: we are working on more content and sample apps in collaboration with amazing GenAI frameworks like [LlamaIndex](https://www.llamaindex.ai/), [LangChain](https://www.langchain.com/), [CrewAI](https://www.crewai.com/), [Vercel AI](https://vercel.com/ai), and [GenKit](https://firebase.google.com/docs/genkit). [Auth for GenAI](https://auth0.com/blog/introducing-auth-for-genai-launching-identity-for-ai-agents/) is our new product to help you protect your user's information in GenAI-powered applications. Make sure to join the [Auth0 Lab Discord server](http://a0.to/auth0-lab-discord) to hear more and ask questions.


Build an AI Assistant with LangGraph, Vercel, and Next.js: Use Gmail as a Tool Securely

auth0_by_okta_hero copy

Team Auth0

Next.js CVE-2025-29927

Sam4-square

I'm an Identity nerd with many years of experience as a developer and advocate. I love explaining complex topics clearly and understandably. You can find me on stage at developer events worldwide or simply having great conversations in the hallway. Google has recognized me as a Google Developer Expert (GDE) in the domains of Web Technologies, Security, Privacy, Payments, and Identity.

Principal Developer Advocate

Sam Bellen

In this post, we will focus on adding fine-grained authorization to your Next.js application using Auth0 FGA.

In this post, we will focus on adding fine-grained authorization (FGA) to your Next.js application. We will check for permissions whenever we request or update data. You'll use Auth0 FGA, a managed solution for making relationship-based access control (ReBAC) decisions. 

This tutorial will explain the steps needed to add a flexible, fine-grained authorization model to your Next.js application.

- Create an [Auth0 FGA account](https://dashboard.fga.dev)
- Create your first Auth0 FGA model
- Add the [Open FGA SDK](https://docs.fga.dev/integration/install-sdk) to your codebase, and configure it to use your Auth0 FGA account
- Check for permissions in your application
- Update the data Auth0 FGA can use to make decisions when making changes in our application.

## What You'll Be Building 

Together, we'll go through the codebase of a Google Drive-style application that lets users upload images, create folders, and share these images and folders with other users.

The focus of this blog post is not on how to upload files, so we're not going to spend time on this. We're going to have a look at how we can deal with sharing files and folders and make sure each user only sees the files and folders they own or the ones that have been shared with them.

The app is structured as follows:

- The application's pages come from `/src/app/folder/`, `/src/app/shared/`, and `/src/app/login/`.
- Components can be found in `/src/components/`.
- We use Server Actions to pass data to and from the frontend. These actions live in `/src/app/actions.ts`.
- There's a Data Access Layer in place to handle fetching and writing data to your Vercel KV store and to upload the files to `/upload/`. The code for the Data Access Layer can be found in `/src/data`.
- The code in `/src/store/` helps us communicate with the Vercel KV since you'll need to make multiple requests for certain actions.

All these elements together give us an architecture that looks like this:

![The demo application architecture](https://images.ctfassets.net/23aumh6u8s0i/1OYq4vAITTzTDJhvvFneJW/8ee89cf32dd2a03ba7a79329cb74b8b3/architecture-light.png)

To follow along, you can download the codebase [here](https://github.com/oktadev/fga-drive-example) or run the following command in your terminal.

```bash
git clone git@github.com:oktadev/fga-drive-example.git
```

The application relies on Auth0 and Vercel services. If you haven't already, create an account for them:

 - Auth0, Create a [free Auth0 account](https://auth0.com/signup).
 - Auth0 FGA uses the same Auth0 account.
 - Vercel KV, create a free Vercel account and a KV store through your [Vercel dashboard](https://vercel.com/dashboard).

## What Is Relationship-Based Access Control

One of the most commonly used approaches to authorization is [Role-Based Access Control (RBAC)](https://auth0.com/blog/what-is-rbac-and-how-to-implement-it-rails-api/#What-is-Role-Based-Access-Control--RBAC-), where a role contains a set of permissions and is assigned to each user. This is a simple way of determining what permissions a user has and what actions they should be able to perform within our application.

More complex applications often require a more flexible approach to authorization, where access can be granted on a user and resource level instead of a general resources type, as done with RBAC. Enter Relationship-Based Access Control or ReBAC. Don't let the one extra letter in the acronym fool you; it's a completely different approach to authorization.

Instead of checking a fixed set of permissions assigned to a user via roles, we're going to look at the relationship between a consumer (or group of consumers) and a resource (or group of resources) to determine if they should be able to access a specific resource(s) or perform an action on them. 

Because we're looking at the bigger picture and determining relationships between two entities, these relationships often don't need to be explicitly defined.

For example, if a user belongs to a group, it is enough to grant that group access, and all its members will automatically be granted access. The same is true for a group of resources. If a user has access to, for example, a folder, they should automatically get access to all files within that folder without explicitly defining these relationships. These are called indirect relationships as opposed to direct ones.

## What Is Auth0 FGA

[Auth0 FGA](https://fga.dev) is a managed solution by Okta that helps you deal with complex authorization decisions in your application. It uses the OpenFGA modeling language (DSL) and decision engine, designed by Okta and adopted by the Cloud Native Computing Foundation (CNCF).

If you prefer to set up your own instance of OpenFGA, follow the ["Setup OpenFGA"](https://openfga.dev/docs/getting-started/setup-openfga/overview) document.

Auth0 FGA provides a set of APIs that let you check for permissions or add more data to the decision engine whenever data changes in your application so the decisions can stay up to date.

The decision engine can check for existing relationships between users and objects, but a user should not always be seen as a literal application user. For example, when checking if a folder is the parent of a file, the parent folder is the user, `parent` is the relation, and the file is the object. Therefore, in this guide, I will often refer to the user in the context of an Auth0 FGA check as a consumer and the object as a resource.

## Create an Auth0 FGA Account

Good news! If you already have an Auth0 account, you can use the same credentials to log in to the Auth0 FGA dashboard at [https://dashboard.fga.dev](https://dashboard.fga.dev). If you don't have an Auth0 account, hop over to [https://dashboard.fga.dev](https://dashboard.fga.dev) and create a free account.

Once you are logged in, you should see a dashboard similar to the one below.


![The Auth0 FGA Dashboard getting started page](https://images.ctfassets.net/23aumh6u8s0i/38P8Vu4qsBvCGrZ4ePew3C/090d068c68b785311a00aa788b92579b/fga-get-started.png)

<div class="alert alert-info alert-icon">
  <i class="icon-budicon-487"></i>
  If this is the first time you log into the Auth0 FGA dashboard, you might be prompted to create a new store. This store will house your authorization model, together with all the data the engine needs to make authorization decisions. Go ahead and choose a name and create a new store.
</div>

## Create Your Authorization Model

Auth0 FGA uses an authorization model to determine all possible relationships it should consider when making a decision. You'll navigate to the Model Explorer page in our dashboard and add the following model to the model editor. Don't forget to hit save!

![The Auth0 FGA Dashboard model page](https://images.ctfassets.net/23aumh6u8s0i/4SVEzhIEkv6khWhSGmFhTj/c9b9a233ad6db70fba0836e59a55b983/fga-model.png)

<div class="alert alert-info alert-icon">
  <i class="icon-budicon-487"></i>
  Check out the [Auth0 FGA Playground](https://play.fga.dev) to play around with the model editor or see some example models for applications like Google Drive, GitHub, or Slack.
</div>

```bash
model
  schema 1.1

type user

type file
  relations
    define can_delete: owner or owner from parent
    define can_share: owner or owner from parent
    define can_view: viewer or owner or viewer from parent
    define can_write: owner or owner from parent
    define is_owned: owner
    define is_shared: can_view but not owner
    define owner: [user]
    define parent: [folder]
    define viewer: [user, user:*]

type folder
  relations
    define can_create_file: owner or owner from parent
    define can_create_folder: owner or owner from parent
    define can_share: owner or owner from parent
    define can_view: viewer or owner or viewer from parent
    define owner: [user]
    define parent: [folder]
    define viewer: [user, user:*] or owner or viewer from parent
```

When you look at this model, you'll notice you defined three types: `user`, `file`, and `folder`. You'll be able to assign relationships between these types. For example, a `user` can be an `owner` or `viewer` of a `file` or a `folder` can be a `parent` of a file (or folder, when nesting folders).

You have also defined some permissions related to actions that can be performed on your types, like `can_view` or `can_share` for the file resource type. It's sometimes more future-proof to create relations like this, so if you expand your model in the future, your application can continue to check for these, even if their definition changes. 

<div class="alert alert-info alert-icon">
  <i class="icon-budicon-487"></i>
More information about the Google Drive model can be found in [our documentation](https://docs.fga.dev/modeling/advanced/use-cases/gdrive ).
</div>

With your authorization model in place, Auth0 FGA has half of what it needs to make decisions. The other half is data on your actual relationships, such as which user owns which file or which folder is a parent of which file. You'll do this in our application code whenever you create a new file or folder or share one of them. But first, let's set up the OpenFGA SDK.


## Install the SDK

To install the OpenFGA Node.js SDK, you'll run the following command in your terminal.

```bash
npm install @openfga/sdk
```

<div class="alert alert-info alert-icon">
  <i class="icon-budicon-487"></i>
  You use the OpenFGA SDK to connect to your Auth0 FGA instance. Both use the same engine and API endpoints and are interchangeable at this point.
</div>

Once installed, you can create a new OpenFGA client in your codebase. You'll find the client in `/src/app/authorization.ts`, and it looks something like this:

```typescript
// [ 📄 /src/app/authorization.ts ]

const fgaClient = new OpenFgaClient({
  apiUrl: process.env.FGA_API_URL,
  storeId: process.env.FGA_STORE_ID,
  authorizationModelId: process.env.FGA_AUTHORIZATION_MODEL_ID,
  credentials: {
    method: CredentialsMethod.ClientCredentials,
    config: {
      apiTokenIssuer: process.env.FGA_API_TOKEN_ISSUER as string,
      apiAudience: process.env.FGA_API_AUDIENCE as string,
      clientId: process.env.FGA_CLIENT_ID as string,
      clientSecret: process.env.FGA_CLIENT_SECRET as string,
    },
  },
});
```

The client needs some details to connect to our Auth0 FGA tenant, which you can add to the `.env.local` file. You'll find these details on the settings page of your Auth0 FGA dashboard. If you haven't created a set of API credentials before, you can also do this on the settings page.

- `apiUrl`: The url to your Auth0 FGA in the form of `https://api.<region>1.fga.dev`
- `storeId`: Found in your Auth0 FGA Dashboard 
- `authorizationModelId`: Found in your Auth0 FGA Dashboard, this changes with each update to your model 
- `apiTokenIssuer`: This is currently always `auth.fga.dev` when using Auth0 FGA 
- `apiAudience`: The same as your `apiUrl` with a trailing slash `/`
- `clientId` & `clientSecret`: Can be found in your Auth0 FGA Dashboard

The SDK exposes a lot of helpful methods to help you interact with Open FGA, but for this example, you'll focus on these two:

- `fgaClient.check()` checks if there's a relationship between a consumer and a resource; for example, can a user view a certain file.
- `fgaClient.writeTuples()` can write new tuples containing data about specific relationships to our OpenFGA store. You'll use this whenever we create a new file, for example.

When you dive deep into the `/src/app/authorization.ts` file, you'll notice there are some helper methods, but in the end, most of these use one of the two functions above.


## Check For A Relationship

When your application requests data, adds more data, or changes existing data, you want to ensure that these actions are actually allowed. 

Next.js [recommends using a Data Access Layer (DAL)](https://nextjs.org/docs/app/building-your-application/authentication#authorization) to manage data being pulled from or written to your database or data store. This happens to be the ideal location to check if the current user is Authenticated and Authorized for each action. You can find the Data Access Layer in `/src/data`.

The OpenFGA exposes the [`check()`](https://www.npmjs.com/package/@openfga/sdk#check) and [`batchCheck()`](https://www.npmjs.com/package/@openfga/sdk#batch-check) methods to check for a relationship before we perform the actions above.

For example, when you request a file, you'll want to make sure that the current user is allowed to see it. Your authorization model defined a relation `can_view` that specified that either a user that has a `viewer` or `owner` relationship defined to the file or a user that is the owner of a parent folder of the file should be able to view the file. 

So let's check for the `can_view` relationship using the `check()` method. 

```typescript
// [ 📄 /src/data/files.ts ]

export async function getFileDTO(
  fileId: string,
): Promise<{ file?: StoredFile; error?: unknown }> {
  try {
    if (await !isAuthenticated()) {
      return { error: "Unauthorized" };
    }

    const userId = await getUserId();
    // 👇 Check for a "can_view" relation in Auth0 FGA
    const { allowed } = await fgaClient.check({
      user: `user:${userId}`,
      relation: "can_view",
      object: `file:${fileId}`,
    });
    // 👆

    if (!allowed) {
      return { error: "Forbidden" };
    }

    const file = await getFileFromStore(fileId);

    if (file) {
      return { file };
    }

    return { error: "No file found" };
  } catch (error) {
    return { error };
  }
}
```

Here, you're checking if a user has a `can_view` relationship to a specific file. The `check()` method will return an object containing the decision as an `allowed` property.

## Create a New Relationship Tuple

Whenever you add, update, or delete some of the data your application works with, you want to make sure your Auth0 FGA instance knows about these changes so it can continue to make accurate decisions. You do this by adding or deleting tuples from the Auth0 FGA Store.

Whenever a user adds a new file or folder, you'll notice we create 2 new tuples, e.g., `/src/data/files.ts` line `188`.

The first tuple defines the current user as the owner of the file or folder. The second tuple sets the parent folder as the parent of a new file or folder. For example

```typescript
// [ 📄 /src/data/files.ts ]

export async function uploadFileDTO(
  parent: string,
  file: File,
): Promise<{ files?: Array<StoredFile>; error?: unknown }> {
  try {
    //...
    await writeFile(filePath, fileBuffer);
    const files = await createFileInStore(fileId, parent, uploadedFile);

    if (files) {
      // 👇 write new tuples to Auth0 FGA
      await fgaClient.writeTuples([
        {
          user: `user:${userId}`,
          relation: "owner",
          object: `file:${fileId}`,
        },
        { 
          user: `folder:${parent}`,
          relation: "parent",
          object: `file:${fileId}`,
        },
      ]);
      // 👆
      return { files };
    }

    return { error: "No files uploaded" };
  } catch (error) {
    return { error };
  }
}
```

From this point onward, each check to make sure our user can view this file will return true.

Whenever a user decides to share a file or folder with another user, you also write a new tuple like: 

```typescript
// [ 📄 /src/data/files.ts ]

export async function shareFileDTO(
  file: string,
  email: string,
): Promise<{ file?: string; error?: unknown }> {
  try {
    ...

    try {
      // Check the Auth0 management API for a user with the given email address
      const { data } = await auth0ManagementClient.usersByEmail.getByEmail({
        email,
        fields: "user_id",
      });

      // No known user with the email address, return an error
      if (data.length === 0) {
        return { error: "A user with this email address does not exist." };
      }

      // 👇 Write a new tuple to Auth0 FGA
      await fgaClient.writeTuples([
        {
          user: `user:${data[0].user_id}`,
          relation: "viewer",
          object: `file:${file}`,
        },
      ]);
      // 👆

      return { file };
    } catch (error) {
      return { error };
    }
  } catch (error) {
    return { error };
  }
}
```

Once this tuple has been written to your store, a check for a relation `can_view` between the user with the passed `userId`, and this file will return true.

You can view and manage all created tuples on the tuple management page of your Auth0 FGA dashboard.

![The Auth0 FGA Dashboard tuples manager page](https://images.ctfassets.net/23aumh6u8s0i/2MiUxTxBwFkUZEGP4Ryld0/fea080ec24342ff12b81b2a11c2b0f31/fga-tuples.png)

## List Objects With A Certain Relationship

On the `/shared` page, you'd like to show all files shared with you. The OpenFGA SDK has a convenient method that can list all objects with a certain relation. In your case, you're interested in all files that have a relation of `is_shared` to your user.

You can call the `listObjects()` method to get a list of shared file IDs that you can then fetch from your data store.

```typescript
// [ 📄 /src/data/files.ts ]

export async function getAllSharedFilesDTO(): Promise<{
  files?: Array<ReadableStoredFile>;
  error?: unknown;
}> {
  try {
    ...
    // 👇 List all files with an "is_shared" relation
    const sharedFiles = await fgaClient.listObjects({
      user: `user:${userId}`,
      relation: "is_shared",
      type: "file",
    });
    // 👆 
    ...
  } catch (error) {
    console.error(error);
    return { error: "Something went wrong." };
  }
}
```

## Next Steps

You've successfully implemented fine-grained authorization into your Next.js application. You can check for relationships between resources and consumers and create new tuples that inform Auth0 FGA about new or changed relationships.

Next, you can play around with the authorization model and adapt it to your needs, look at [conditional relations](https://docs.fga.dev/modeling/basics/conditions), or even create [context-aware relations](https://docs.fga.dev/modeling/basics/contextual-time-based-authorization).

Fine-Grained Authorization in your Next.js application using Auth0 FGA

I stream, blog, and make youtube videos about tech stuff. I love coding, I love AI, and I love building stuff!

Juan Cruz Martinez

With the introduction of Next.js 14, Server Actions are now stable, but what are Server Actions, and how can they be used to fetch and update data from external APIs?

**Next.js** is a React framework that enables static site generation (SSG), server-side rendering (SSR), and incremental static regeneration (ISR). It is known for its performance, scalability, and ease of use.

One of the most exciting new features in Next.js 14 is Server Actions. Server Actions allow you to execute server-side code without creating dedicated API routes.
Server Actions can be helpful in various tasks, such as fetching data from external APIs, performing business logic, or even updating your database.

<AmpContent>
<amp-youtube
    data-videoid="z4JnIYIrvSE"
    layout="responsive"
    width="480" height="270">
</amp-youtube>
</AmpContent>
<NonAmpContent>
<div class='embed-container' style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;margin-bottom:40px;"><iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src='https://www.youtube.com/embed/z4JnIYIrvSE' frameborder='0' allowfullscreen></iframe></div>
</NonAmpContent>

## Understanding Next.js Server Actions

[Server Actions](https://nextjs.org/docs/app/api-reference/functions/server-actions) have been a part of Next.js since version 13. However, in version 14 of the framework, Server Actions are stable and incorporated by default as a framework feature.

You can use Server Actions for a variety of use cases, but they are well-suited for the following ones:

- **Fetching data from external APIs**: Server Actions can fetch data from external APIs without compromising performance or security.
- **Performing business logic**: Server Actions can perform business logic that requires server execution, such as validating user input or processing payments.
- **Updating your database**: Server Actions can update your database without creating separate API routes.

### How Server Actions work

Next.js Server Actions are asynchronous JavaScript functions that run on the server in response to user interactions on the client. Server Actions are made possible by a number of complex technical processes, but the basic idea is as follows:

1. In the client, a user action or business logic condition triggers a function call to a Server Action. For the developer, this is no different than calling an async function.
2. Next.js will serialize the request parameters (such as any form data or query string parameters) and send them to the server.
3. The server will then deserialize the request parameters and execute a function that represents the Server Action.
4. Once the Server Action has finished executing, the server will serialize the response and send it back to Next.js. Next.js will then deserialize the response and send it back to the front end.
5. When the promise resolves, the front end will continue its client-side execution.

### The syntax for defining Server Actions

You can define Server Actions in two places:

- In the server component that uses it.

```jsx
// app/page.ts
export default function ServerComponent() {
  async function myAction() {
    'use server'
    // ...
  }
}
```

- Or in a separate file for reusability.

```jsx
// app/actions.ts
'use server'
 
export async function myAction() {
  // ...
}
```

### How to invoke Server Actions

To invoke a Server Action in Next.js, you can use one of the following methods:

1. Using the `action` prop.

You can use the `action` prop to invoke a Server Action from any HTML element, such as a `<button>`, `<input type="submit">`, or `<form>`.

For example, the following code will invoke the `likeThisArticle` Server Action when the user clicks the "Add to Shopping Cart" button:

```html
	<button type="button" action={likeThisArticle}>Like this article</button>
```

2. Using the `useFormState` hook.

You can use the `useFormState` hook to invoke a Server Action from a `<form>` element.

For example, the following code will invoke the `addComment` Server Action when the user submits the form:

```javascript
'use client'

import { useFormState } from 'react';
import { addComment } from '@/actions/add-comment';

export default function ArticleComment({ initialState }) {
  const [state, formAction] = useFormState(addComment, initialState)

  return (
    <form action={formAction}>
      Add Comment
    </button>
  )
}
```

3. Using the `startTransition` hook.

You can use the `startTransition` hook to invoke a Server Action from any component in your Next.js application.

For example, the following code will invoke the `addComment` Server Action.

```javascript
	'use client'
	
	import { useTransition } from 'react';
	import { addComment } from '@/actions/add-comment';
	
	export default function ArticleComment() {
	  const [isPending, startTransition] = useTransition()
	
		function onAddComment() {
			startTransition(() => {
				addComment('This article is nothing but great!');
	    });
		}
	
	  return (
	    <button onClick={() => onAddComment()}>
	      Add Comment
	    </button>
	  )
	}
```

The `startTransition` hook ensures that the state update batches with other state updates that are happening at the same time. Using `startTransition` can improve the performance of your application by reducing the number of re-renders that are required.

### Which method should I use?

The best method for invoking a Server Action depends on your specific needs. If you need to invoke a Server Action from a `<form>` element, then use the `formAction` prop. If you need to invoke a Server Action from a component, then use the `startTransition` hook.

## Sending Data to an External API Using Server Actions

Now that we have a basic understanding of Server Actions let’s build some real-world examples, like using Server Actions to send data to a third-party API.

To start, you’ll create a Server Action that will trigger from a form submission. As you'll see later, this differs from other functions triggered by JavaScript function calls.

Create a new Server Action, `addComment`. This new function will expect one single parameter of the type [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData); here is an example:

```javascript
// /services/actions/comment
'use server'

export async function addComment(formData) {
  const articleId = formData.get('articleId');
  const comment = formData.get('comment');
  const response = await fetch(`https://api.example.com/articles/${articleId}/comments`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ comment }),
  });
  const result = await response.json();
  return result;
}
```

That’s all you need to do to create a Server Action. Let’s focus on invoking this function when the user submits a form.

Let’s create a new component that will render the “Add Comment” form:

```javascript
import { addComment } from '@/services/actions/comment'
 
export default async function ArticleComment(props) {
  return (
    <form action={addComment}>
      <input type="text" name="articleId" value={props.articleId} />
      <input type="text" name="comment" />
			<button type="submit">Add Comment</button>
    </form>
  )
}
```

Done! You have a fully functional Server Action triggered from a form submission, but if you tried it out, you’ll notice that it looks unresponsive, meaning that the user is not aware that something is happening as there is no “loading” or “saving” activity shown. Let’s fix that next.

### Displaying the loading state

We can use the `useFormStatus` hook to display a loading state while a form is being submitted. As a hook, it can only live in a client component and can only be used as a child of a `form` element using a Server Action.

Let’s now update our current component, `ArticleComment`, and replace the `button` with a custom component of our creation called `AddCommentButton`.

```javascript
import { addComment } from '@/services/actions/comment'
import { AddCommentButton } from '@/components/AddCommentButton'
 
export default async function ArticleComment(props) {
  return (
    <form action={addComment}>
      <input type="text" name="articleId" value={props.articleId} />
      <input type="text" name="comment" />
			<AddCommentButton />
    </form>
  )
}
```

And, of course, you’ll have to create such a component:

```javascript
'use client'
 
import { useFormStatus } from 'react-dom'
 
export function AddCommentButton() {
  const { pending } = useFormStatus();
 
  return (
    <button type="submit" aria-disabled={pending}>
      Add
    </button>
  )
}
```

Now, when the form is submitted, the new status will be reflected in the variable `pending` and will adjust the `button` component accordingly. You can expand this code to provide more visual feedback to the user and create a better user experience.

## Submitting Files to Server Actions

If you need to send more than JSON serializable data, like texts and numbers, or more specifically, if you need to submit and handle file uploads, don’t worry. Server Actions have you covered!

You can submit files to Server Actions the same way you have worked with Server Actions so far, by using a form submission with an `<input type="file />` or libraries like `dropzone`. There’s nothing especially different that needs to happen on the client side for it to work.

On the server side, things could be different depending on your needs. For example, you could save the file, transform the file, etc. The process to retrieve the file would be the same.

Let’s look at a sample Server Action that handles a file upload and transmits the file to an API using a stream:

```javascript
// /services/actions/upload-file
'use server'

export async function uploadFile(formData) {
  const comment = formData.get('file');
  const arrayBuffer = await file.arrayBuffer();
  const buffer = new Uint8Array(arrayBuffer);
  await new Promise((resolve, reject) => {
    upload_stream({}, function (error, result) {
      if (error) {
        reject(error);
        return;
      }
      resolve(result);
    })
    .end(buffer);
  });
}
```

It is that simple!

> You must know that there is a size limitation imposed on Server Actions, which is 1 MB by default, though it can be customized. For more information, check the official [Server Action’s size limitation](https://nextjs.org/docs/app/api-reference/functions/server-actions#size-limitation) documentation.

## Best Practices for Using Server Actions

We have covered so much already about Server Actions, but the topic is so extensive that it won't fit in a single article. At least it wouldn't be practical, but I don't want to leave you without first sharing some of my recommendations and best practices to work with Server Actions and stay further. I also share some tips on accessing protected resources using Auth0 and Next.js Server Actions.

- **Decouple of Server Actions**. As we mentioned above, it is possible to write Server Actions in a separate file, but in case you don’t expect to re-utilize your function, you could write the same in a Server Component. But, as we learned from experience or the book "Clean Code", separation of concerns is important to keep the code easier to understand, maintain, reuse, and test. So, try to keep a separation between components and actions.
- **Don’t disregard the client side.** As the line between server and client blurs in the magic of Server Components, it can be easy to forget or disregard the proper handling of the UI. For example, moving from validations to the server could reduce a few lines of code but sacrifice user experience.
- **Cache the results of Server Actions.** If a Server Action returns data that is not frequently changing, you can cache the results so that they do not have to be fetched from the server every time. Avoiding unnecessary data fetching can improve the performance of your application.
- **Use Server Actions to handle errors gracefully.** If a Server Action fails, you should handle the error gracefully and return a meaningful error message to the user.
- **Protect your Server Actions.** When it comes to security, don’t think of your Server Actions any differently than you would if the same code lived in an API endpoint. Server Actions need to be secured and protected from unauthorized access.

## Calling a Protected API Endpoint

Protected APIs are not publicly accessible and require some form of authentication or authorization before they can be accessed. This is important for protecting sensitive data and preventing unauthorized access.

There are multiple mechanisms you can implement to protect APIs, for example:

- **API Keys:** API keys are a simple and effective way to protect APIs. They are secret strings that are given to authorized clients. When a client sends a request to an API, it must include its API key in the request. The API will then check the API key to ensure that it is valid before processing the request.
- **Access Tokens:** Access tokens are another way to protect APIs. They are short-lived tokens that are generated by an authentication server and are sent to an application in response to a successful user authentication. The application then uses the access token to access the API by sending it in its requests. Access tokens can be implemented in various forms, with a popular option being [JSON Web Tokens (JWTs)](https://jwt.io).

### API Keys to protect API endpoints

An API key is a secret string of characters that is used to identify and authenticate an application when making requests to an API. API keys are typically used to protect APIs from unauthorized access and to track usage.

While API keys can identify a specific project or application making an API call, they do not identify the individual user making the request. This is a significant security limitation, as it allows anyone with the API key to access the API, regardless of who they are.

To learn more about API keys and how OAuth 2.0 can help mitigate some of its drawbacks, I recommend reading [Why You Should Migrate to OAuth 2.0 from API Keys](https://auth0.com/blog/why-migrate-from-api-keys-to-oauth2-access-tokens/)

API keys implementation varies from project to project, so depending on how your target API implements API keys, it may vary the way you use Server Actions to make calls to the API.

Let’s rebuild our `addComment` Server Action to pass an API key to the target API.

```javascript
// /services/actions/comment
'use server'

export async function addComment(formData) {
	const articleId = formData.get('articleId');
	const comment = formData.get('comment');
  const response = await fetch(`https://api.example.com/articles/${articleId}/comments`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    'x-api-key': process.env.CMS_API_KEY // 👈 New Code
    },
    body: JSON.stringify({ comment }),
  });
  const result = await response.json();
  return result;
}
```

The server function remains the same, with the exception of passing a new parameter on the request headers. In the example above, the header name is `x-api-key`, but it may be different depending on the API.

Because Server Actions run in the server, it is safe to read the API keys from environment variables, though you should make sure your environment provider is safe to do so. For example, if you deploy using Vercel, all [environmental variable values](https://vercel.com/docs/projects/environment-variables) are automatically encrypted at rest.

API keys are great for multiple scenarios, but sometimes, your API needs to be aware of the user performing the action. For example, our current API is not aware of who is creating the comment, and though it could be added as a payload, it wouldn’t be safe if we couldn’t verify that it was the user who performed the operation.

### Access Tokens to protect API endpoints

Access tokens are used in token-based authentication, enabling applications to access APIs. The application receives an access token following a successful user authentication and authorization process. This token is then passed as a credential when making API calls. The presented token informs the API that the bearer has been authorized to access the API and perform specific actions defined by the scope granted during authorization.

So we can break the process in a two-step process:

- Authentication: Identifying a user and retrieving an access token
- Calling an endpoint: Using the received and verifiable access token to call the API endpoint

The process of authenticating, generating, verifying, and securely handling Access Tokens is a daunting and time-consuming task where a mistake can compromise the data and safety of your systems, so it is common for application builders to rely on existing authentication and authorization providers, for example, [Auth0](https://auth0.com/).

Authentication is outside the scope of this guide, but if you want to learn more about authentication or you want to know how to implement Auth0 authentication to your Next.js application, please follow the steps on this [quick guide](https://auth0.com/docs/quickstart/webapp/nextjs/interactive) or the complete [guide on Next.js Authentication](https://auth0.com/blog/ultimate-guide-nextjs-authentication-auth0/). And if you don’t have an Auth0 account yet, you can <a href="https://a0.to/blog_signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">sign up for a free Auth0 account</a>.

Once your users are authenticated, you can rewrite your Server Action as follows:

```javascript
// /services/actions/comment
'use server'
import { getAccessToken } from '@auth0/nextjs-auth0' // 👈 New Code

export async function addComment(formData) {
  const accessToken = await getAccessToken(); // 👈 New Code
  const articleId = formData.get('articleId');
  const comment = formData.get('comment');
  const response = await fetch(`https://api.example.com/articles/${articleId}/comments`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    'Authorization': `Bearer ${accessToken.accessToken}`, // 👈 New Code
    },
    body: JSON.stringify({ comment }),
  });
  const result = await response.json();
  return result;
}
```

In this new flow, you’ll need to retrieve the Access Token from your session. The Auth0 SDK makes this easy with the method `getAccessToken`. After that, you can simply pass the token to the request using the `Authorization` header.

Next, in the third party or external API, you can verify the token to ensure it’s not compromised, and you can decode the token to obtain additional information, such as the user, permissions, and more.

## Conclusion

Server Actions are a fantastic new feature in Next.js that allows developers to do more with less code by eliminating much of the boilerplate required to write API codes and their subsequent calling code.

In this guide, we covered the fundamentals of Server Actions to delve into the particularities of calling third-party public and protected API endpoints.

Next.js has many exciting new features, and I'll be exploring more of them in future posts. So, if you would like me to cover any specific Next.js feature, please drop a comment below.

Thanks for reading!

Using Next.js Server Actions to Call External APIs

Let's explore the main features of the new Auth0 SDK for NextJS release.

For almost a year now, the team at Next.js has been building the foundations for the future of Next.js, a future based on the React architecture, which includes Server Components, Server Actions, and much more.

With the introduction of Next.js 13.4 a few months ago, the new [App router](https://nextjs.org/blog/next-13-4#nextjs-app-router) architecture with support for React Server Components, nested routes, layouts, and new data fetching design, was promoted to stable and is the recommended option for newly built Next.js applications.

These new fundamental changes in architecture and APIs on Next.js meant that many libraries with support for Next.js had to undergo changes to fully utilize and benefit from the latest release.

<AmpContent>
<amp-youtube
    data-videoid="9ubpQ_VW158"
    layout="responsive"
    width="480" height="270">
</amp-youtube>
</AmpContent>
<NonAmpContent>
<div class='embed-container' style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;margin-bottom:40px;"><iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src='https://www.youtube.com/embed/9ubpQ_VW158' frameborder='0' allowfullscreen></iframe></div>
</NonAmpContent>

Auth0's first SDK for Next.js dates back to 2021. Since then, we have been committed to the Next.js community by providing a robust, scalable, and developer-friendly SDK for implementing user authentication. We are **very happy to announce the stable release of the [Auth0 Next.js SDK v3](https://github.com/auth0/nextjs-auth0/releases/tag/v3.0.0)** with support for App Router, Edge Runtime, and Responses in Middleware.  We’ve created this [quickstart guide](https://auth0.com/docs/quickstart/webapp/nextjs/01-login) that demonstrates how to integrate Auth0 with any new or existing Next.js application using the Auth0 Next.js SDK.

## What Do I Need to Do With Existing Applications Using Pages Router?

Not much. Like Next.js, the Auth0 Next.js SDK `v3` continues to support the Pages Router and the new App Router. When updating to the new SDK, there are three considerations to keep in mind:

- As is the case for Next.js `v13.4`, the new SDK requires [Node `v16` LTS or newer releases](https://nodejs.org/en/download).
- For TypeScript applications, differences in function signatures that support both the Pages and App Router may require you to use explicit declarations for the `request` and `response` objects to help TypeScript infer their type correctly. For example:
    - Before:
    
    ```typescript
    import { withApiAuthRequired } from '@auth0/nextjs-auth0'
    
    export default withApiAuthRequired(async function handler(req, res) {
      res.status(200).json({});
    });
    ```
    
    - After:
    
    ```typescript
    import { NextApiRequest, NextApiResponse } from 'next';
    import { withApiAuthRequired } from '@auth0/nextjs-auth0'
    
    export default withApiAuthRequired(async function handler(req: NextApiRequest, res: NextApiResponse) {
      res.status(200).json({});
    });
    ```
    
- The `/401` handler has been removed: As of Next.js `v13.1`, you can now return responses from middleware. As such, the unauthorized handler has been removed in favor of an unauthorized response.

If you need to migrate your application from the Auth0 Next.js SDK `v2` to the latest version, please follow our official [`v3` migration guide](https://github.com/auth0/nextjs-auth0/blob/main/V3_MIGRATION_GUIDE.md).

## Working with the New App Router

Working with the new App Router requires a shift in the architecture and project structure of your Next.js application, and as a result of this new architecture, there are a [few limitations](https://github.com/auth0/nextjs-auth0/tree/main#important-limitations-of-the-app-directory) that you need to understand before implementing authentication for your application or working with cookies and sessions in general.

These are the steps to add authentication to your Next.js application using the latest version of the Auth0 Next.js SDK:

### Install the Auth0 SDK for Next.js

First and foremost, install the Auth0  Next.js SDK using the following command:

```bash
npm install @auth0/nextjs-auth0
```

### Add the dynamic API route

As was the case for Pages Router, the Auth0 SDK automatically creates a series of API routes or endpoints to handle essential authentication features such as login, logout, and getting user information.

For the Auth0 Next.js SDK to create such routes, it is necessary to create a [catch-all, dynamic API route handler](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes) under the `/app/api` directory. Technically speaking, you don’t need to use the `api` directory anymore to specify API routes. However, our SDK follows that convention for simplicity and clarity.

Then, create a `route.js` or `route.ts` file under the `/app/api/auth/[auth0]/` directory and populate it with the following code:

```javascript
import { handleAuth } from '@auth0/nextjs-auth0';

export const GET = handleAuth();
```

### Make the Auth0 hooks accessible throughout your application

When working on the client side of your Next.js application, you can use the `useUser()` hook from the Auth0 Next.js SDK to retrieve information about the current user and session. Since this hook leverages the React Context API to manage and communicate the authentication state of the user, you’ll have to wrap your components with a `UserProvider`. 

When using the Next.js App Router, you should wrap your [root layout](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#layouts) with `UserProvider` as follows:

```javascript
// app/layout.js
import React from 'react';
import { UserProvider } from '@auth0/nextjs-auth0/client';

export default function App({ children }) {
  return (
    <UserProvider>
      <body>{children}</body>
    </UserProvider>
  );
}
```

### Access user and session information

You can check if a user is authenticated by verifying that the `user` object returned by the `useUser()` hook is defined. Additionally, you can log in or log out of your users from the client layer of your Next.js application by redirecting them to the corresponding automatically-generated route.

Here is an example of a client component accessing and using user information to build a basic login, logout user flow.

```javascript
// pages/index.js
'use client';
import { useUser } from '@auth0/nextjs-auth0/client';

export default function Index() {
  const { user, error, isLoading } = useUser();

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

  if (user) {
    return (
      <div>
        Welcome {user.name}! <a href="/api/auth/logout">Logout</a>
      </div>
    );
  }

  return <a href="/api/auth/login">Login</a>;
}
```

## What’s Next

With the release of the Auth0 Next.js SDK v3, we are excited to continue supporting the Next.js community with a comprehensive solution for user authentication and route protection.

<div class="alert alert-info alert-icon">
  <i class="icon-budicon-487"></i>
  <b>To get started, create a free account at <a href="https://auth0.com/signup?utm_source=partner&utm_medium=vercel-okta&utm_campaign=2023-03%7CINB-ORG%7CVercel-Auth0-SignupUserCreationForm-SU&ocid=7014z000000zJItAAM-aPA4z0000008OZeGAM&utm_id=aNK4z000000blT4GAI">Auth0.com</a>.</b><br> 
</div>

In this article, we only covered the basics, and if you want to learn more about how to secure your application, please check the official [GitHub repository for the SDK](https://github.com/auth0/nextjs-auth0) as well as some [examples of practical use cases](https://github.com/auth0/nextjs-auth0/blob/main/EXAMPLES.md), or check out our [Next.js code samples](https://developer.auth0.com/resources/code-samples/web-app/nextjs/basic-authentication). To get started on Next.js Authentication with Auth0 check out this [blog post](https://auth0.com/blog/ultimate-guide-nextjs-authentication-auth0/).

Auth0 by Okta is committed to providing our community and customers with a smooth yet robust developer experience to secure their applications. We continue to look for ways to improve our products and shape the future of authentication. We'd love to hear about your experience using our latest iteration of the Auth0 Next.js SDK.

Thanks for reading!

Auth0 Stable Support For Next.js App Router!

jon-meyers

Software engineer, egghead instructor, writer, and educator at <b>jonmeyers.io</b>, hip hop producer at soundcloud.com/dijonmusters

Developer Advocate at Supabase

Jon Meyers

Learn how to integrate Auth0 authentication with database storage and row-level security authorization in Supabase.

Using Next.js and Auth0 with Supabase

sandrino-di-mattia

Principal Architect

Sandrino Di Mattia

Learn how (and where) to authenticate your user in the different deployment models that exist for Next.js

The Ultimate Guide to Next.js Authentication with Auth0

asehmi

I work with a few tech start-ups providing technical strategy and product development advice and seed investment. I've rediscovered the joys of hands-on software development and actively engage with various developer communities to learn myself and educate sharing what I know. Previously, I was CIO at Oxford Economics for 10 years bringing 25 years’ prior experience in capital markets and high-technology software industries, enterprise software architecture and solutions development. Before that I spent eight years at Microsoft as a global business manager and award-winning software architect and technical evangelist. <br>
Earlier in my career, I was CTO at a start-up building advanced social media analytics products followed by a couple of years as an executive coach and mentor, and IT change management and strategy consulting to a number of small and medium sized businesses.

Startups Strategy Advisor

Arvindra Sehmi

In this article, I will show you how to build a Streamlit Component to authenticate users in Streamlit applications and external APIs with Auth0.

Streamlit User and API Authentication with Auth0 Next.js SDK

37590801?s=460&v=4

A software engineer who dreams about non-electric sheep and autonomous vehicles and likes to champion security.

Software Engineer

Dan Arias

Learn how to use Next.js to create server-side rendered React applications.



In this tutorial series, you'll be provided with a practical introduction to how Next.js can help you build web applications.

Created by [Vercel, a cloud company for hosting frontends and serverless functions](https://vercel.com/home), Next.js is a React framework capable of creating applications that run both on the client and the server, otherwise known as Universal JavaScript applications. This framework helps you build universal apps faster by streamlining basic features like client-side routing and page layout while simplifying advance features like server-side rendering and code splitting.

In this first part of the series, you'll learn how to create pages and a page layout [using Next.js 9](https://nextjs.org/blog/next-9), the most recent framework version at the time of writing. [Familiarity with the React library](https://auth0.com/blog/react-tutorial-building-and-securing-your-first-app/) is recommended.

## Getting Started

To start, you need to bootstrap a React project with `next` as a dependency. Anywhere in your system, create a folder named `whatabyte` and make it your current directory:

```bash
mkdir whatabyte
cd whatabyte
```

Then, initialize a default Node.js project under the `whatabyte` directory and install core dependencies by issuing these commands:

```bash
npm init -y
npm install --save react react-dom next
```

As the name suggests, `next` is the package that will allow you to use the Next.js framework in your project with all of its modules, components, and dependencies.

Next.js is flexible but has one major structural requirement for it to work. Every Next.js project needs to have a `pages` subdirectory child to the project directory. Therefore, create a new `pages` subdirectory like so:

```bash
mkdir pages
```

Every page of your web app will be defined as a React component in a JavaScript file under the `pages` subdirectory. For example, the file `index.js` represents the root path, `/` and a file named `user.js` represents the `/user` path. You'll get a more detailed explanation of these mechanics in the next section.

To make running and building your Next.js application easy, replace the NPM scripts of your `package.json` with the following:

```json
{
  //...
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  //...
}
```

Save the changes made to `package.json`. To run the project, execute this command in the terminal:

```bash
npm run dev
```

Head to [`http://localhost:3000/`](http://localhost:3000/) and bask in the glory of a `404` error. You haven't done anything wrong. This error shows up because the `pages` directory is empty. It needs an `index.js` file inside to render the default `/` home route. You'll do that... Next!

## Creating Your First Next.js Page

To understand how Next.js works, it helps to think about creating websites the classical way using HTML pages. The `index.html` file is the entry point of a website and it contains logic that takes the visitor to any other pages, like `about.html` and `profile.html`.

With Next.js, each page is represented by a JavaScript file under the `pages` subdirectory. Each file, instead of having HTML templates, exports a React component that is used by Next.js to render the page with the default root route being `index.js`. Go ahead and create this file under `pages` subdirectory:

```bash
touch pages/index.js
```

* Windows PowerShell:

```bash
ni pages/index.js
```

Populate `index.js` with this code:


```javascript
// pages/index.js

const Index = () => (
  <div>
    <p>Thank u, next</p>
  </div>
);

export default Index;
```

Without having to restart the app, Next.js detects the new `index.js` and the exported `Index` component and updates the view in the browser automatically.

![Next.js index page](https://images.ctfassets.net/23aumh6u8s0i/2bXaYCcMmJDNz0US5biyQb/62f0e3dbcc6d0cfe90e1e8d8f69b24dd/nextjs-practical-introduction_nextjs-index-page)

If you were using `create-react-app` to build your React application, you'd be looking here at rendering an `App` component instead. The `App` component is the parent or shell component for the whole application. With Next.js, you can think of that component as being implied through the `pages` subdirectory and hierarchy.

To achieve a uniform core interface for each page, you'd want to have a common layout that includes a header, a content container, and a navigation bar. This can be easily done with Next just like you'd do it with `create-react-app`: using components.

## Creating a Next.js Layout Using React Components

Under the `whatabyte` root directory, create a `components` directory:

```bash
mkdir components
```

The name of this directory could be really anything, but it makes sense to stick with well-understood file structure names that make it easier for anyone else to understand the structure of your application.

You need three components for creating a layout:

* `Layout` to hold the core view in place
* `Header` to provide a standard header to all views
* `NavBar` to provide navigation buttons

Thus, create the following files under the `components` directory:

* `Layout.js`
* `Header.js`
* `NavBar.js`

```bash
touch components/Layout.js components/Header.js components/NavBar.js
```

* Windows PowerShell:

```bash
ni components/Layout.js, components/Header.js, components/NavBar.js
```

Open `Header.js` and add the following code to it:

```javascript
// components/Header.js

const headerStyle = {
  backgroundColor: "blue",
  color: "white",
  width: "100%",
  height: "50px"
};

const Header = () => (
  <div className="Header" style={headerStyle}>
    HEADER
  </div>
);

export default Header;
```

In `NavBar.js` add the following:

```javascript
// components/NavBar.js

const navBarStyle = {
  backgroundColor: "red",
  color: "white",
  width: "100%",
  height: "60px"
};

const NavBar = () => (
  <div className="NavBar" style={navBarStyle}>
    NAVBAR
  </div>
);

export default NavBar;
```

In `Layout.js`, use the `Header` and `NavBar` components to render any content passed through `props.children` within a `Content` container:

```javascript
// components/Layout.js

import Header from "./Header";
import NavBar from "./NavBar";

const layoutStyle = {
  display: "flex",
  flexDirection: "column",
  height: "100%",
  width: "100%"
};

const contentStyle = {
  flex: 1,
  display: "flex",
  flexDirection: "column"
};

const Layout = props => (
  <div className="Layout" style={layoutStyle}>
    <Header />
    <div className="Content" style={contentStyle}>
      {props.children}
    </div>
    <NavBar />
  </div>
);

export default Layout;
```

These three components use inline CSS styling to give improve their structure and presentation.

Finally, update `index.js` to use the `Layout` component:

```javascript
// pages/index.js

import Layout from "../components/Layout";

const Index = () => <Layout>Welcome to WHATABYTE!</Layout>;

export default Index;
```  

![Next.js index page using a layout component](https://images.ctfassets.net/23aumh6u8s0i/69v0dEitl6ISUXJtGPylY/7b08e470423209df73b4c8340384968b/nextjs-practical-introduction_nextjs-index-page-using-a-layout-component)

> The look and feel of the interface will improve in the next part of this tutorial.

In the browser, the index page now shows a blue box serving as a header, a white box with a message serving as content, and a red box serving as the navigation bar. With a layout in place, you are ready to create more pages with a consistent structure.

## Creating More Pages Using Next.js

The _WHATABYTE_ app has four core views:

* Explore: To show trending restaurants and dishes
* Near Me: To show restaurants near the user
* My Cart: To show the orders of the user
* Profile: To show the user information such as name, address, and billing data

As you may be thinking, you'll need to add new files under the `pages` directory to represent each of these pages. You are right. The plan here is to create a route for each view:

* `/explore`
* `/nearme`
* `/mycart`
* `/profile`

To create these views, create the following files under the `pages` directory and add their respective content:

```bash
touch pages/explore.js pages/nearme.js pages/mycart.js pages/profile.js
```

* Windows PowerShell:

```bash
ni pages/explore.js, pages/nearme.js, pages/mycart.js, pages/profile.js
```

- `explore.js`:

```javascript
// pages/explore.js

import Layout from "../components/Layout";

const ExploreView = props => <Layout>{`Explore View`}</Layout>;

export default ExploreView;
```

- `nearme.js`:

```javascript
// pages/nearme.js

import Layout from "../components/Layout";

const NearMeView = props => <Layout>{`Near Me View`}</Layout>;

export default NearMeView;
```

- `mycart.js`:

```javascript
// pages/mycart.js

import Layout from "../components/Layout";

const MyCartView = props => <Layout>{`My Cart View`}</Layout>;

export default MyCartView;
```

- `profile.js`:

```javascript
// pages/profile.js

import Layout from "../components/Layout";

const ProfileView = props => <Layout>{`Profile View`}</Layout>;

export default ProfileView;
```

In the browser, you can visit [`http://localhost:3000/explore`](http://localhost:3000/explore) and see the new Explore page up and running! You can try any of the other paths as well.

<include src="TweetQuote" quoteText="Learn how to bootstrap a Next.js application to create pages and a page layout."/>

## Get Your Head In the Next.js Game

Your Next.js pages need to have a document title shown on the page tab or window title bar of the browser. To add a document title, you need to use the [`<title>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) HTML element which can only be used within a web page's `<head>` block.

Next.js pages are created with a `<head>` block that has sensible defaults such as the following:

```html
<head>
  <title class="next-head"></title>
  <meta charset="utf-8" class="next-head">
  <meta
    name="viewport"
    content="width=device-width,minimum-scale=1,initial-scale=1"
    class="next-head">
</head>
```

However, notice that the `title` tag is empty. To modify the `head` block, Next.js offers a [built-in `Head` component](https://github.com/zeit/next.js/#populating-head) in the `next/head` module which appends elements to the `<head>` block of a page. To modify the document title, you'd nest a `title` HTML element within the `Head` component.

Since you need the document title to be present on every page, the `<head>` block should be modified within the `Layout` component template. Open `components/Layout.js` and update its content as follows:

```javascript
// components/Layout.js

import Head from "next/head";

// Component imports remain the same

// Style objects already defined

const Layout = props => (
  <div className="Layout" style={layoutStyle}>
    <Head>
      <title>WHATABYTE</title>
    </Head>

    <Header />
    <div className="Content" style={contentStyle}>
      {props.children}
    </div>
    <NavBar />
  </div>
);

export default Layout;
```

The browser tab or window hosting your page should now reflect the "WHATABYTE" title.

The `<head>` block can also contain other important metadata (data that describes data) like scripts, stylesheets, character encoding, name, and much more.

> For more information, visit the [`<head>` block](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) and [metadata](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#Attributes) MDN docs.

<include src="TweetQuote" quoteText="Learn how to get started with Next.js, a universal JavaScript framework based on React."/>

## Next Steps

The current layout of the application is not working as it should. The `.Content` container, within the `Layout` component, is expected to stretch out to fill the space left by the `Header` and `NavBar` components as its `contentStyle` object specifies the `flex: 1` CSS property. However, this flexible property depends on the height value of the its parent, the `.Layout` container.

Despite the `height` of the `.Layout` container being specified in its `layoutStyle` object as `100%`, this container is not filling out the full height of the viewport. In turn, this could only mean that its parent doesn't have a definite height.

If you open the browser Dev Tools and look at the structure of the Index page, you'll notice that the parent container for the app is a `div` element with the ID `__next`. Clicking on that element shows that it has no height or width; therefore, its descendant containers have no height value to inherit and use for dynamic sizing.

To fix this, you'd need to give the `__next` container a `height` and `width` of `100%`. But Next.js doesn't come with a default global index stylesheet like with `create-react-app`. The solution is to style components in the "Next.js way" or to use custom SCSS, which is the topic of the next second part of this tutorial.

## Recap

In this first part, you have learned how to use Next.js to create pages that integrate a page layout. Using a page layout gives your pages consistent high-level structure. To give the elements within each page better styling and positioning, you need to rely on CSS.

So far, you applied basic styling to your pages using inline style objects. However, Next.js offers more scalable and powerful mechanisms to apply styles to your pages. In the next part of this tutorial, your pages will go from this...

![Another Next.js view with basic layout](https://images.ctfassets.net/23aumh6u8s0i/2D9tCkdKRpVwyNcCJxThNf/94870998bf1d698363b2fdb6ddeb51e3/nextjs-practical-introduction_another-nextjs-view-with-basic-layout)

... to this!

![Next.js polished layout](https://images.ctfassets.net/23aumh6u8s0i/1URWqzEEl1HZEdGTmW8vD4/37d1dfb6885b42030cbd1fb789349274/nextjs-practical-introduction_nextjs-polished-layout)

### [Continue to Part 2: Next.js Styling and Theming](https://auth0.com/blog/next-js-practical-introduction-for-react-developers-part-2/)


Next.js Practical Introduction: Pages and Layout

adam-mcgrath

I've been working as an Engineer on the web for over 20 years at companies including the BBC, Google and IG. At Auth0, I build and maintain our JavaScript SDKs for servers and browsers.

SDK Engineer

Adam McGrath

Learn how to authenticate users with Auth0’s Next.js SDK



**TL;DR:** Auth0 announces the release of [nextjs-auth0](https://www.github.com/auth0/nextjs-auth0), a new [Next.js](https://nextjs.org/) SDK that makes it super easy to add authentication to your Next.js apps. Get it [here](https://github.com/auth0/nextjs-auth0).

Next.js blurs the line between frontend and backend, so there is more than one way to do authentication on a Next.js app.

To identify which authentication pattern you should use, you must first understand the [data-fetching strategy](https://nextjs.org/docs/basic-features/data-fetching) you want. The predominant patterns are:

### Fetching user data client-side

You will use [Static Generation](https://nextjs.org/docs/basic-features/pages#static-generation-recommended) to generate the page’s HTML at build time. The HTML will then be reused on each request and can be cached by a CDN. The user will be quickly served an [app shell](https://developers.google.com/web/fundamentals/architecture/app-shell), usually a loading indicator, before the client-side code fetches the user’s data to populate the content.

Your typical authentication for this type of application will be that of a SPA, where the user’s tokens are stored on the client.

For fetching user data client-side, we recommend using [auth0-react](https://github.com/auth0/auth0-react); we have an [example Next.js app](https://github.com/auth0/auth0-react/tree/master/examples/nextjs-app) using auth0-react for authentication in the project’s repository [here](https://github.com/auth0/auth0-react/tree/master/examples/nextjs-app).

### Fetching user data server-side

When the server receives a request for a page, it will fetch your user’s data and construct the page at the request time. This will be slower than returning the page from a CDN but doesn’t need to display an app shell while the frontend fetches the user data.

Your typical authentication for this type of application will be that of a Regular Web App, where the user’s tokens are stored in a secure session that is not directly accessible from the client-side and therefore not vulnerable to the more [common XSS attacks](https://auth0.com/docs/security/prevent-common-cybersecurity-threats).

>💡As you can see from the two models described above, there are various tradeoffs for performance and security. For more information, check out our[ Ultimate Guide to Next.js Authentication with Auth0](https://auth0.com/blog/ultimate-guide-nextjs-authentication-auth0/).

For fetching user data server-side, we recommend our new Next.js SDK [nextjs-auth0](https://github.com/auth0/nextjs-auth0/).

## Adding Session Based Authentication to a Next.Js Application

In a few lines of code [nextjs-auth0](https://github.com/auth0/nextjs-auth0/) adds server-side login, logout, and session management. It also offers a suite of tools to access the user’s session from the server and client-side.

Create a **Regular Web Application** in the [Auth0 Dashboard](https://manage.auth0.com/) and configure the following URLs for your application under Application URIs:

* **Allowed Callback URLs**: [http://localhost:3000/api/auth/callback](http://localhost:3000/api/auth/callback)
* **Allowed Logout URLs**: [http://localhost:3000/](http://localhost:3000/)

Take note of the **Client ID**, **Client Secret**, and **Domain** of your application because you’ll need it in the next step.

Install the SDK using npm or yarn, eg.

``` bash  
npm install @auth0/nextjs-auth0
```


The library needs the following required configuration keys. These can be configured in a .env.local file in the root of your application (See more info about [loading environmental variables in Next.js](https://nextjs.org/docs/basic-features/environment-variables)):

``` bash  

#A long secret value used to encrypt the session cookie
AUTH0_SECRET=LONG_RANDOM_VALUE
#The base url of your application
AUTH0_BASE_URL=http://localhost:3000
#The url of your Auth0 tenant domain
AUTH0_ISSUER_BASE_URL=https://YOUR_AUTH0_DOMAIN.auth0.com
#Your Auth0 application's Client ID
AUTH0_CLIENT_ID=YOUR_AUTH0_CLIENT_ID
#Your Auth0 application's Client Secret
AUTH0_CLIENT_SECRET=YOUR_AUTH0_CLIENT_SECRET

```

For a [full list of configuration options](https://auth0.github.io/nextjs-auth0/modules/config.html) see the docs.

Then, create a [Dynamic API Route handler](https://nextjs.org/docs/api-routes/dynamic-api-routes) at `/pages/api/auth/[...auth0].js`.


``` js  
import { handleAuth } from '@auth0/nextjs-auth0';

export default handleAuth();
```


This will create the following urls: `/api/auth/login`, `/api/auth/callback`, `/api/auth/logout` and `/api/auth/me`.

That’s it! The server-side is now setup and you can visit [http://localhost:3000/api/auth/login](http://localhost:3000/api/auth/login) to login.

To access the user on the client-side, wrap your `pages/_app.js` component in the `UserProvider`component.

``` js  
//pages/_app.js
import React from 'react';
import { UserProvider } from '@auth0/nextjs-auth0';
export default function App({ Component, pageProps }) {
  return (
    <UserProvider>
      <Component {...pageProps} />
    </UserProvider>
  );
}

```

This will populate a React Hook `useUser` you can use to check the user object. You can also log them in and out from the front end by redirecting to the appropriate `/api/auth/*` route.

``` js  
// pages/index.js
import { useUser } from '@auth0/nextjs-auth0';

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

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

  if (user) {
    return (
      <div>
        Welcome {user.name}! <a href="/api/auth/logout">Logout</a>
      </div>
    );
  }

  return <a href="/api/auth/login">Login</a>;
};
```

Go checkout the [QuickStart](https://auth0.com/docs/quickstart/webapp/nextjs) for a more detailed setup and also [the examples](https://github.com/auth0/nextjs-auth0/blob/main/EXAMPLES.md) for more ways to use the new [nextjs-auth0](https://github.com/auth0/nextjs-auth0/) SDK.

Happy coding!


Introducing Auth0's Next.js SDK

Learn how to use Next.js to add navigation and routing to server-side rendered React applications.



In this tutorial series, you'll be provided with a practical introduction to how Next.js can help you build web applications. 

Created by [ZEIT, a cloud company for hosting frontends and serverless functions](https://zeit.co/), Next.js is a React framework capable of creating applications that run both on the client and the server, otherwise known as Universal JavaScript applications. This framework helps you build universal apps faster by streamlining basic features like client-side routing and page layout while simplifying advance features like server-side rendering and code splitting.

Part one of this Nextjs series shows developers [how to create pages and layouts](https://auth0.com/blog/next-js-practical-introduction-for-react-developers-part-1/). In the second part of the series, you learned [how to add styling and create themes](https://auth0.com/blog/next-js-practical-introduction-for-react-developers-part-2/). In this third part of the series, you'll learn how to navigate to pages and implement routing using [using Next.js 9](https://nextjs.org/blog/next-9), the most recent framework version at the time of writing. [Familiarity with the React library](https://auth0.com/blog/react-tutorial-building-and-securing-your-first-app/) is recommended.

## Setting Up the Project

If you are starting from this part, you can get the app that was built in the previous, second part by cloning the repo and checking out the `part-2` branch:

```bash
git clone git@github.com:auth0-blog/whatabyte-next-intro.git whatabyte
cd whatabyte
git checkout part-2
```

If you haven't [connected to GitHub using SSH](https://help.github.com/en/articles/connecting-to-github-with-ssh), please clone the repo with the HTTPS URL:

```bash
git clone https://github.com/auth0-blog/whatabyte-next-intro.git whatabyte
cd whatabyte
git checkout part-2
```

The repository is cloned into the directory called `whatabyte` on your local machine. If the directory doesn't exist, it is created.

With the branch checked out, proceed to install the project dependencies:

```bash
npm install
```

Finally, execute the following command in your terminal to run the app:

```bash
npm run dev
```

To see the app in action and start following the tutorial, visit [`http://localhost:3000`](http://localhost:3000) on your browser.

## Understanding Next.js Routing

The _WHATABYTE_ app has four core routes:

* `/explore`: To show trending restaurants and dishes
* `/nearme`: To show restaurants near the user
* `/mycart`: To show the orders of the user
* `/profile`: To show the user information such as name, address, and billing data

From these four core routes, the `/explore` route will be the main route. Thus, the root path, `/`, should redirect to `/explore`.

First, to get familiar with navigation in Next.js, you'll navigate to the Explore page from the Index page by adding a hyperlink inside the content container of the Index page. You can do this easily by using the [Next.js `Link` component](https://nextjs.org/docs#with-link) inside `index.js` as follows:

```javascript
// pages/index.js
import Link from "next/link";

import Layout from "../components/Layout";

const Index = () => (
  <Layout>
    <br />
    <Link href="/explore">
      <a> Welcome to WHATABYTE! Start Exploring Now</a>
    </Link>
  </Layout>
);

export default Index;
```

The Next.js `Link` component takes a route or navigation path as the value of its `href` property. You can embed any other component within `Link` as long as that component can take an `href` prop.

After the view updates in the browser, visit [`http://localhost:3000/`](http://localhost:3000/) and click on the link. It will take you to the Explore page.

![Next.js app using the Link component](https://images.ctfassets.net/23aumh6u8s0i/p60hqwOc0JhYZ0QZfr89b/9450c893ce78d695ecd3d01ad20313bd/nextjs-practical-introduction_nextjs-app-using-link-component)

Using this link to navigate to another page is good for testing but what the app needs is navigation through the `NavBar` component. To do so, you'd need a `NavButton` component to make the creation of four navigation buttons standard and easy to maintain. 

To make the buttons look nice, you'll use the [FontAwesome icons](https://fontawesome.com/icons?d=gallery). Using another console window or tab, install the following packages:

```bash
npm i @fortawesome/fontawesome-svg-core \
  @fortawesome/free-solid-svg-icons \
  @fortawesome/react-fontawesome
```

* Windows PowerShell:

```bash
npm i @fortawesome/fontawesome-svg-core `
  @fortawesome/free-solid-svg-icons `
  @fortawesome/react-fontawesome
```

Creating the navigation bar dynamically would be much easier if you can encapsulate all of its configuration in a file. Under the `whatabyte` directory, create a `config` subdirectory:

```bash
mkdir config
```

Within that new subdirectory, create a `buttons.js` file within it:

```bash
touch config/buttons.js
```

* Windows PowerShell:

```bash
ni config/buttons.js
```

Then, populate `buttons.js` as follows:

```javascript
// config/buttons.js

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faCompass,
  faMapMarkerAlt,
  faUser,
  faShoppingCart
} from "@fortawesome/free-solid-svg-icons";

const navButtons = [
  {
    label: "Explore",
    path: "/explore",
    icon: <FontAwesomeIcon icon={faCompass} />
  },
  {
    label: "Near Me",
    path: "/nearme",
    icon: <FontAwesomeIcon icon={faMapMarkerAlt} />
  },
  {
    label: "My Cart",
    path: "/mycart",
    icon: <FontAwesomeIcon icon={faShoppingCart} />
  },
  {
    label: "Profile",
    path: "/profile",
    icon: <FontAwesomeIcon icon={faUser} />
  }
];

export default navButtons;
```

Then, under the `components` directory, create a `NavButton.js` file that exports the `NavButton` component:

```bash
touch components/NavButton.js
```

* Windows PowerShell:

```bash
ni components/NavButton.js
```

Then, populate `NavButton.js` with the following:

```javascript
// components/NavButton.js

import Link from "next/link";

import "./NavButton.scss";

const NavButton = props => (
  <Link href={props.path}>
    <div className="NavButton">
      <div className="Icon">{props.icon}</div>
      <span className="Label">{props.label}</span>
    </div>
  </Link>
);

export default NavButton;
```

The `NavButton` needs its proper styling. Create `NavButton.scss` as a sibling file:

```bash
touch components/NavButton.scss
```

* Windows PowerShell:

```bash
ni components/NavButton.scss
```

Then, populate `NavButton.scss` with the following [style rules](https://sass-lang.com/documentation/style-rules):

```scss
// components/NavButton.scss

.NavButton {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;

  height: 100%;

  cursor: pointer;

  .Icon {
    font-size: 20px;
  }

  .Label {
    font-size: 12px;
    text-transform: capitalize;
  }
}
```

Import the button configuration file in the `Layout` component and pass its data as the `navButtons` props to the `NavBar` component:

```javascript
// components/Layout.js
import Head from "next/head";

import Header from "./Header";
import NavBar from "./NavBar";

import "./Layout.scss";
import "./index.scss";

import navButtons from "../config/buttons";

const Layout = props => {
  const appTitle = `> WHATABYTE`;

  return (
    <div className="Layout">
      <Head>
        <title>WHATABYTE</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta charSet="utf-8" />
      </Head>

      <Header appTitle={appTitle} />
      <div className="Content">{props.children}</div>
      <NavBar navButtons={navButtons} />
    </div>
  );
};

export default Layout;
```

It's better for the `Layout` component to be the one responsible for passing the button configuration to the `NavBar` component as it is in charge of enforcing a consistent structure for each page of the application. If you wanted to keep `Layout` as a presentational component, then you could wrap it into a container component that passes it the button configuration data.

To render the buttons within the `NavBar` component, update the content of the `NavBar.js` file as follows:

```javascript
// components/NavBar.js

import "./NavBar.scss";
import NavButton from "./NavButton";

const NavBar = props => (
  <div className="NavBar">
    {props.navButtons.map(button => (
      <NavButton
        key={button.path}
        path={button.path}
        label={button.label}
        icon={button.icon}
      />
    ))}
  </div>
);

export default NavBar;
```

If your app is not running, execute `npm run dev` in the terminal. Otherwise, visit [`http://localhost:3000/`](http://localhost:3000/) directly and then click on the Profile button. You'll be taken to the Profile page. Try using the other navigation buttons. 

> If the labels and icons of the buttons look too big, refresh the page.

Did you notice a bit of delay when you navigated from page to page? If you look at the terminal window or tab where the server is running, you may see a message from Next.js explaining that the pages need to be compiled when you first load them, causing a small delay:

```bash
Note that pages will be compiled when you first load them.
```

The navigation bar becomes much more functional and expressive by having those buttons with icons and labels on them. However, adding a visual indicator of what view is active by looking at the navbar would further improve the user experience. You'll learn how to do that in the next section by applying the `.active` CSS class to `NavButton` components dynamically.

<include src="TweetQuote" quoteText="Learn how to add navigation and routing to Next.js apps."/>

## Using High-Order Components with Next.js

The Next.js `Link` component has two main props:

- `href` specifies a path inside the `pages` directory to use as a route.

- `as` is used to customize the path rendered in the browser URL bar. 

 
There's no "active" class prop that we can pass to it. To style it, you need to do so within its underlying components.

The Next.js router keeps track of the active page through a `router.pathname` property. To inject the `pathname` prop in your component, you can use the [`withRouter` higher-order component](https://nextjs.org/docs#using-a-higher-order-component). Using this prop with conditional styling will let you have a distinctive style for the active page button. 

Open `components/NavButton.js` and update its content to this:

```javascript
// components/NavButton.js

import Link from "next/link";
import { withRouter } from "next/router";

import "./NavButton.scss";

const NavButton = props => (
  <Link href={props.path}>
    <div
      className={`NavButton ${
        props.router.pathname === props.path ? "active" : ""
      }`}
    >
      <div className="Icon">{props.icon}</div>
      <span className="Label">{props.label}</span>
    </div>
  </Link>
);

export default withRouter(NavButton);
```

If the `path` prop matches the `router.pathname` prop, the `active` class is added to the `NavButton` class name. Save your changes and test the navigation buttons in the browser. Once you click on a button, its icon lights up into an orange-red-like color.

![Next.js nav bar with active view indicator](https://images.ctfassets.net/23aumh6u8s0i/7CGRo1E2kEu4n0r74at5x1/c43e0ae420ce84103ca404111249cc58/nextjs-practical-introduction_nextjs-nav-bar-with-active-view-indicator)

## Recap

In this part of the tutorial, you have learned how to use Next.js built-in components to navigate to pages within your app and to represent the state of the router through navigation UI elements. 

You've done a lot so far throughout this tutorial and there is a lot more than could be done using Next.js! The last part of this practical introduction to Next.js will teach you how to create a login page and add user authentication to your app using Passport.js and Auth0.

Again, you can reference [Part 2 for adding styling and creating themes, here](https://auth0.com/blog/next-js-practical-introduction-for-react-developers-part-2/) and [Part 1 for creating pages and a page layout](https://auth0.com/blog/next-js-practical-introduction-for-react-developers-part-1/)

> Can't wait to learn about Next.js authentication? Feel free to read Bruno's [Next.js Authentication Tutorial](https://auth0.com/blog/next-js-authentication-tutorial/).

<include src="asides/AboutAuth0" />


Next.js Practical Introduction: Navigation and Routing

Learn how to handle styling and theming while using Next.js to build server-side rendered React applications.

Next.js Practical Introduction: Styling and Theming

1097492785caf9ffeebffeb624202d8f?s=200 avatar

1097492785caf9ffeebffeb624202d8f?s=200

Prosper is a great speaker, community leader, open source hacker, technical consultant, and a fervent Developer Advocate. He is a full-stack software engineer who has worked on biometric, health and developer tools. Prosper recently co-founded a startup called Eden that’s focused on improving the quality of lives in Nigeria and currently leads the engineering team. He also co-founded forloop, the largest developer community in Africa.

Former Auth0 Employee

Prosper Otemuyiwa

Next.js 3.0 has officially been released. What's new? What improvements were made? Learn how to build highly performant Universal JavaScript apps with this new release.



---

**TL;DR:** On Tuesday, October 25 2016, a small JavaScript framework, **Next.js** was released to the public. It's a minimal framework for building server-rendered universal JavaScript web apps. Within a few months of its existence, it gathered a lot of attention from the JavaScript community. The React community was set ablaze with joy for finally having a tool that can help build server-side rendering apps without hassle and in-depth technical know-how. In fact, we covered [how to build a universal JavaScript web app](https://auth0.com/blog/building-universal-apps-with-nextjs) with it. In this article, I'll highlight the notable additions to Next.js's new release, **Next.js 3.0**.

---

## Primer: What is a Universal JavaScript Application?

First, I'll provide a little context for the individuals that find *Universal JavaScript* to be a new term.

The term *Universal* simply means the ability to run the same code on the server, browsers, mobile devices and any other platform. *Universal Javascript* is a term people are leaning towards these days. A lot of developers also call it **Isomorphic JavaScript**. In short, there is a debate on the [React repo](https://github.com/facebook/react/pull/4041) about this term. Michael Jackson, a popular ReactJS developer, wrote a blog post on [Universal JavaScript](https://medium.com/@mjackson/universal-javascript-4761051b7ae9#.ij2c0zh8j). It's indeed true that *naming things* is one of the most difficult aspects of Computer Science.

## What's new in Next.js 3.0 ?

### 1. Dynamic Import Support

Next.js now ships with [Dynamic Import](https://github.com/tc39/proposal-dynamic-import). The import function in all its glory allows a codebase to be split into a set of chunks that can be dynamically loaded later.

In Next.js, you can now use dynamic import as seen below:

```js
const lodash = import('lodash');
...
```

```js
button.addEventListener('click', event => {
    import('./dialogBox.js')
    .then(dialogBox => {
        dialogBox.open();
    })
    .catch(error => {
        /* Error handling */
    })
});
```

This helps to load functionality on demand. Next.js supports server side rendering for dynamic imports which makes it incredibly awesome for you to avoid displaying the clients blank pages, flickering, or loading spinners.

### 2. Static Export Support

Next.js now allows you to generate a truly static site by exporting your project to an `out` directory with _.html_ and _.css_ files. The good thing about this feature is that it was community-driven.

![Static Export Support](https://images.ctfassets.net/23aumh6u8s0i/1llLL6AEOoc7zYsKZizycC/473efb7d65a70efc4c79f47a98c6329e/export)
_Community Driven Static Export feature_

You need to do the following:

* Create a custom next.config.js file like so:

    ```js
    exports.exportPathMap = () => ({
      "/": { page: "/" },
      "/about": { page: "/about" }
    });
    ```

* Now run the command like so:

    ```bash
    next build && next export
    ```


**Note:** It's advisable you configure the command in your package.json file like so:

```js
"scripts": {
    "export": "next build && next export",
}
```

So you can just run `npm run export` and it will build your Next.js app as a static website. This simply means you don't need any server to deploy it. Whoop! Whoop!

Change directory into the new `out` directory and deploy your app to a cloud platform, e.g `[now](https://vercel.com/home)`.

### 3. Better Error Handling

The error color theme has been updated to be more accessible and easier on the eyes.

![Beautiful Error Handling](https://images.ctfassets.net/23aumh6u8s0i/18lLeagPxae7lZddoy2ClI/3b3928dfbc695ef95a4e7e90f502522b/beautifulerror)

![Better Error Handling](https://images.ctfassets.net/23aumh6u8s0i/1e0kvz8Lb0COuBVPBbd0AX/d84d2f68ddad05cb42e6b8c78ce8eec8/beautifulerrordisplay)

![Live error reloading](https://images.ctfassets.net/23aumh6u8s0i/58c5JCOJdMC5mPpQLsDdwU/992eb559a29e7fdba028b4f43df2af7e/1)
_Source: Zeit_

### 4. Improved Startup Time

Startup time for a Next.js app is now 5 times faster. The bootup time for a typical Next.js 3 app was cut down from [1000ms to about 200ms](https://github.com/zeit/next.js/pull/2566).

### 5. Optimized Bundle

The bundle size of Next.js core is now smaller. In fact, here is the webpack bundle analyzer output after optimization:

![Optimized Bundle](https://images.ctfassets.net/23aumh6u8s0i/5QsMShX7SRqcBHw6lehnUq/df60403225bc5c8b3af23fb60fad7353/27760078-542abbea-5e5c-11e7-9ae4-2d1beb6fad3b)
_Optimized Bundle_

### 6. Improved Hot Module Replacement

Before now, there were some bugs with HMR, (hot module replacement), One of which was the `ERR_INCOMPLETE_CHUNK_ENCODING` error that shows up when using Node.js 8.0. That issue has been solved. Yaay!

Furthermore, if you return a wrong type, Next.js shows you the right error message and also recovers smoothly from it once the right type is returned.

![Returning of Bad Type](https://images.ctfassets.net/23aumh6u8s0i/7t05kuQIc2SamJuOIkcCgF/56d0fb50c76f9ec1c205fdeccb04b9a6/4)
_Better Bad Type Returns_

One more thing: _undefined is not a function_ is now obsolete. Next.js now correctly identifies any type of runtime error thrown and catches it effectively. A typical example of this scenario can be seen below:

![Undefined is now a function](https://images.ctfassets.net/23aumh6u8s0i/PAvzrSpuzbSN42cD3DIkh/94417ed865bc528662c0286221ca96a9/5)
_Source: Next.js Blog_

### 7. Dynamic React Components

Next.js now ships with a powerful opt-in utility called `next/dynamic` which helps you to create dynamically loaded React Components easily.

Before now, code splitting was route based. In Next.js 3, you will be able to load code as a function of the data that the user gets.

```js
import dynamic from 'next/dynamic'
const DialogComponent = dynamic(import('../components/DialogBox'))

export default () => (
  <div>
    <Header />
    <DialogComponent />
    <p>Weclome to the landing Page</p>
  </div>
)
```

**Note:** If the dynamic component is loaded in the initial rendering, server-rendering also works. Awesome!

## Aside: Authenticating a Next.js 3.0 App with Auth0

**Auth0** issues [JSON Web Tokens](https://jwt.io/) on every login for your users. This means that you can have a solid [identity infrastructure](https://auth0.com/docs/identityproviders), including [single sign-on](https://auth0.com/docs/sso/single-sign-on), user management, support for social identity providers (Facebook, Github, Twitter, etc.), enterprise identity providers (Active Directory, LDAP, SAML, etc.) and your own database of users with just a few lines of code.

We can easily set up authentication in a **Next.js 3.0** apps by using the [Auth0.js library](https://github.com/auth0/auth0.js). If you don't already have an Auth0 account, <a href="https://auth0.com/signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">sign up</a> for one now. Navigate to the Auth0 [management dashboard](https://manage.auth0.com/), click on `New client` by the right hand side, select Regular Web App from the dialog box and then go ahead to the `Settings` tab where the client ID, client Secret and Domain can be retreived.

> [Auth0 offers a generous **free tier**](https://auth0.com/pricing) to get started with modern authentication.

**Note:** Make sure you set the  `Allowed Callback URLs` to `http://localhost:3000/auth/signed-in` or whatever url/port you are running on. Furthermore; set the `Allowed Logout URLs` to `http://localhost:3000/`.

Authentication in a Next.js app could be a little complicated because you have to ensure that the server-rendered pages are authenticated, meaning they need to have access to the token.

Check out the [complete app on Github](https://github.com/auth0-blog/next3-auth0).

**Note**: Don't forget to rename the `config.sample.json` file to `config.json` and add your credentials.

_utils/auth.js_

```js
import jwtDecode from 'jwt-decode'
import Cookie from 'js-cookie'

const getQueryParams = () => {
  const params = {}
  window.location.href.replace(/([^(?|#)=&]+)(=([^&]*))?/g, ($0, $1, $2, $3) => {
    params[$1] = $3
  })
  return params
}

export const setToken = (idToken, accessToken) => {
  if (!process.browser) {
    return
  }
  Cookie.set('user', jwtDecode(idToken))
  Cookie.set('idToken', idToken)
  Cookie.set('accessToken', accessToken)
}

export const unsetToken = () => {
  if (!process.browser) {
    return
  }
  Cookie.remove('idToken')
  Cookie.remove('accessToken')
  Cookie.remove('user')

  // to support logging out from all windows
  window.localStorage.setItem('logout', Date.now())
}

export const getUserFromServerCookie = (req) => {
  if (!req.headers.cookie) {
    return undefined
  }
  const jwtCookie = req.headers.cookie.split(';').find(c => c.trim().startsWith('idToken='))
  if (!jwtCookie) {
    return undefined
  }
  const jwt = jwtCookie.split('=')[1]
  return jwtDecode(jwt)
}

export const getUserFromLocalCookie = () => {
  return Cookie.getJSON('user')
}
```

_utils/auth0.js_

```js
const getAuth0 = (options) => {
  const config = require('../config.json')
  const auth0 = require('auth0-js');
  return new auth0.WebAuth({
    clientID: config.AUTH0_CLIENT_ID,
    domain: config.AUTH0_CLIENT_DOMAIN,
  });
}

const getBaseUrl = () => `${window.location.protocol}//${window.location.host}`

const getOptions = (container) => {
  return {
    responseType: 'token id_token',
    redirectUri: `${getBaseUrl()}/auth/signed-in`,
    scope: 'openid profile email'
  }
}

export const authorize = () => getAuth0().authorize(getOptions())
export const logout = () => getAuth0().logout({ returnTo: getBaseUrl() })
export const parseHash = (callback) => getAuth0().parseHash(callback)
```

_pages/auth/sign-in.js_

```js
import React from 'react'

import defaultPage from '../../hocs/defaultPage'
import { authorize } from '../../utils/auth0'

class SignIn extends React.Component {
  componentDidMount () {
    authorize()
  }
  render () {
    return null
  }
}

export default defaultPage(SignIn)
```

Display the login page once the sign-in component gets mounted.

![Sign in](https://images.ctfassets.net/23aumh6u8s0i/2JTzAHZ4DYApBtnWPNln7f/5a349755eddf6de0f1d9af9add50ac89/login)
_Sign-in page_

_pages/auth/signed-in.js_

```js
import React, { PropTypes } from 'react'
import Router from 'next/router'

import { setToken } from '../../utils/auth'
import { parseHash } from '../../utils/auth0'

export default class SignedIn extends React.Component {
  static propTypes = {
    url: PropTypes.object.isRequired
  }

  componentDidMount () {
    parseHash((err, result) => {
      if(err) {
        console.error('Something happened with the Sign In request')
        return;
      }

      setToken(result.idToken, result.accessToken);
      Router.push('/')
    })
  }
  render () {
    return null
  }
}
```

Grab the token and ID token from Auth0 as it returns to the callback which is the signed-in page, save it and redirect to the index page.

![Signed in](https://images.ctfassets.net/23aumh6u8s0i/14z8F69ob3jDjTW3EU0GGe/90a70dca48759f88f50b7746b9279085/authenticated)
_Secret page shows that the user is signed in and can access it_

_pages/index.js_

```js

import React, { PropTypes } from 'react'
import Link from 'next/link'

import defaultPage from '../hocs/defaultPage'

const SuperSecretDiv = () => (
  <div>
    This is a super secret div.
    <style jsx>{`
      div {
        background-color: #ecf0f1;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        border-radius: 2px;
        padding: 10px;
        min-height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #333;
        text-align: center;
        font-size: 40px;
        font-weight: 100;
        margin-bottom: 30px;
      }
    `}</style>
  </div>
)

const createLink = (href, text) => (
  <a href={href}>
    {text}
    <style jsx>{`
      a {
        color: #333;
        padding-bottom: 2px;
        border-bottom: 1px solid #ccc;
        text-decoration: none;
        font-weight: 400;
        line-height: 30px;
        transition: border-bottom .2s;
      }

      a:hover {
        border-bottom-color: #333;
      }
    `}</style>
  </a>
)

const Index = ({ isAuthenticated }) => (
  <div>
    {isAuthenticated && <SuperSecretDiv />}
    <div className='main'>
      <h1>Hello, friend!</h1>
      <p>
        This is a super simple example of how to use {createLink('https://github.com/zeit/next.js', 'next.js')} and {createLink('https://auth0.com/', 'Auth0')} together.
      </p>
      {!isAuthenticated && (
        <p>
          You're not authenticated yet. Maybe you want to <Link href='/auth/sign-in'>{createLink('/auth/sign-in', 'sign in')}</Link> and see what happens?
        </p>
      )}
      {isAuthenticated && (
        <p>
          Now that you're authenticated, maybe you should try going to our <Link href='/secret'>{createLink('/secret', 'super secret page')}</Link>!
        </p>
      )}
    </div>
    <style jsx>{`
      .main {
        max-width: 750px;
        margin: 0 auto;
        text-align: center;
      }

      h1 {
        font-size: 40;
        font-weight: 200;
        line-height: 40px;
      }

      p {
        font-size: 20px;
        font-weight: 200;
        line-height: 30px;
      }
    `}</style>
  </div>
)

Index.propTypes = {
  isAuthenticated: PropTypes.bool.isRequired
}

export default defaultPage(Index)

```

The index page is server-rendered. It checks if the user is authenticated or not and renders content based on the status.

The [secret page](https://github.com/auth0-blog/next3-auth0/blob/master/pages/secret.js) too checks if the user is logged in and determines content based on the user's status.

![Secret page unauthorized](https://images.ctfassets.net/23aumh6u8s0i/5DsWPZ588X2Sk38vtC2XBv/be98b2c2c08ad9c65e0527fd4e13b3f0/notloggedin)
_Not displaying valid content because the user cant access the secret page without signing in_

**Note:** This example performs no server side validation of the token sent by the user in its cookies. For production-ready secure pages this is necessary.

> Auth0 provides the simplest and easiest to use [user interface tools to help administrators manage user identities](https://auth0.com/user-management) including password resets, creating and provisioning, blocking and deleting users.

## Conclusion

With **Next.js 3**, the [GitHub repo](https://github.com/zeit/next.js/) now has over 16,000 stars and we have seen lots of significant improvements and major upgrades from the initial version that was released last year. Kudos to the team behind this project and the JavaScript community for their continuous support. In fact, they already have plans for **[Next.js 4](https://vercel.com/blog/next3#4.0-and-beyond)**.


Next.js 3.0 Release: What's New?

Next.js 2.0 has officially been released. What's new? What improvements were made? Learn how to build highly performant Universal JavaScript apps with this new release.

"next.js"