Next Guide

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.


Additional resources

#Requirements

  • Next version 14 or later
  • Using the App Router

#Installation

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

#Provider props

OptionDefaultDescription
tenantIdstringThe tenant identifier, this can be found in workspace Tenants on the Userfront dashboard.
loginUrlstringRedirect URL for unauthenticated visitors that need to login, the default is /login.
loginRedirectstringRedirect URL after login, false to disable. When undefined, uses the path configured to the workspace paths & routing settings.
signupRedirectstringRedirect URL after signup, false to disable. When undefined, uses the path configured to the workspace paths & routing settings.
logoutRedirectstringRedirect URL after logout, false to disable. When undefined, uses the path configured to the workspace paths & routing settings.
requireAuthbooleanWhen 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

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:

PropertyTypeDescription
isAuthenticatedbooleanWhether or not the current visitor is signed into a valid user account.
isLoadingbooleanWhether 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

OptionDefaultDescription
apiKeyUSERFRONT_API_KEYThe 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.
tenantIdUSERFRONT_TENANT_IDThe parent workspace ID, this can be found on the Userfront dashboard.
modeNODE_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.
originundefinedThe origin header for requests, this may be required in some cases.
debugNODE_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.