Next.js Quickstart
This is a quickstart guide to help you integrate Descope with your Next.js application. Follow the steps below to get started.
Import AuthProvider
from Frontend SDK
Next step is to import all of the built-in functions you will want to use from Descope NextJS SDK.
Wrap application with AuthProvider
Wrap the entire application with <AuthProvider />
. You need your Project ID for this step, which you can take from the snippet on the right.
Note
You can also add the optional baseUrl
parameter if you're utilizing a CNAME within your Descope project (ex: https://auth.company.com
).
Add Flows Component
To trigger the Descope Flow, you will need to add this component. The screens you've customized in your Flow will appear here. You can also customize the component with the following:
flowId
: ID of the flow you wish to useonSuccess
andonError
: functions that execute when authentication succeeds or fails
Note
Descope stores the last user information in local storage. If you wish to disable this feature, you can pass store-last-authenticated-user
as false
to the AuthProvider
component. Please note that some features related to the last authenticated user may not function as expected if this behavior is disabled.
Getting User Details
To extract details on the user, you can load the user details from e.detail.user
. On successful authentication, the information about the user is returned and accessible with e.detail.user.
onSuccess
: function that executes when authentication succeeds
For example:
Alternatively, you can also use the me function which fetches the current authenticated user information.
Utilize the NextJS SDK Hooks and Functions
Descope provides many different hooks to check if the user is authenticated, session is loading etc. You can use these to customize the user experience:
isAuthenticated
: is user authenticated?isSessionLoading
: This is used for implementing loading screens while sessions are being establisheduser
: user object that contains all user attributes (email, name, etc.)isUserLoading
: This is used for implementing loading screens while user objects are being loadedgetSessionToken()
: This gets the session token from your browser which you can include in your backend requests
Setting Up the Middleware
You can use NextJS Middleware to require authentication for specific pages and routes in your application. The Descope SDK provides a middleware function that can be used to require authentication for your protected pages and routes. Read more about the Next SDK here
Congratulations
Now that you've got the authentication down, go focus on building out the rest of your app!
Checkpoint
Your application is now integrated with Descope. Please test with sign-up or sign-in use case.
Customize
Now that you have the end-to-end application working, you can choose to configure and personalize many different areas of Descope, including your brand, style, custom user authentication journeys, etc. We recommend starting with customizing your user-facing screens, such as signup and login.