Next Guide

Additional resources

Next is a React framework that makes it easy to build fast, production-ready web apps. This guide will show you how to add Userfront to your Next.js app.

#Requirements

• Next version 14 or later
• Using the App Router

#Installation

Add the UserfrontProvider with your desired tenantId to the root layout:

#Provider props

Option	Default	Description
tenantId	string	The tenant identifier, this can be found in workspace Tenants on the Userfront dashboard.
loginUrl	string	Redirect URL for unauthenticated visitors that need to login, the default is /login.
loginRedirect	string	Redirect URL after login, false to disable. When undefined, uses the path configured to the workspace paths & routing settings.
signupRedirect	string	Redirect URL after signup, false to disable. When undefined, uses the path configured to the workspace paths & routing settings.
logoutRedirect	string	Redirect URL after logout, false to disable. When undefined, uses the path configured to the workspace paths & routing settings.
requireAuth	boolean	When true, unauthenticated visitors will be redirected to the loginUrl.

#Client

Use @userfront/next/client with client components. These files or functions have the "use client"; directive.

#Ready to use

UI Toolkit components are included in this package. Import and use them without any props:

The available components are LoginForm, SignupForm, PasswordResetForm and LogoutButton.

#Hook

Use the useUserfront() hook to access the current client auth state:

In addition to the core JS library and the UserfrontProvider properties, these are also available for use:

Property	Type	Description
isAuthenticated	boolean	Whether or not the current visitor is signed into a valid user account.
isLoading	boolean	Whether or not Userfront has loaded and initialized.

For example, redirect unauthenticated visitors to the login page:

#Server

Use @userfront/next/server on the server. These files or functions should have the "use server"; directive.

#Environment Methods

Define these environment variables in your .env or however they are configured in your application:

The SDK will use these variables when they are defined.

#Using the Node Client

You may choose to instantiate the Node client instead, for example, when your secrets are retrieved asynchronously, if you're using a context, or if you prefer the greater abstraction. There are other debugging and error handling benefits as well.

#Client Options

Option	Default	Description
apiKey	USERFRONT_API_KEY	The secret admin API key, from Authentication / API Keys in the Userfront dashboard.
baseUrl	'https://api.userfront.com'	The API URL to use for requests, in case you're using a proxy or custom domain.
version	'v0'	The API version to use, an empty string will remove the version from requests.
tenantId	USERFRONT_TENANT_ID	The parent workspace ID, this can be found on the Userfront dashboard.
mode	NODE_ENV === 'production' ? 'live' : 'test'	The mode to use, live when process.env.NODE_ENV is production, otherwise test. To enable live mode, visit Live Domains in the Userfront dashboard.
origin	undefined	The origin header for requests, this may be required in some cases.
debug	NODE_ENV !== 'production'	Log a cURL per request, disabled when process.env.NODE_ENV is production.

#Debugging

With the client, a cURL logger will be enabled by default in development environments.

Disable this by setting debug to false in the client options.

#Error Handling

Responses that are not 2xx will throw a UserfrontFetcherError. Catch them to handle Userfront errors appropriately.

#Support

Got stuck and need some help? Please do not hesistate to contact us and our team of engineers will be happy to help.