Integrates Logto auth to your Next.js application using Server Actions.
Server Actions presents a refreshed approach to create robust web applications without the need for traditional REST APIs. We've previously discussed this in our article.
Today, we're thrilled to announce the official support for Server Actions in our Next.js SDK, despite it being an experimental feature.
For a quick overview, check out this sample and follow along as we detail how to integrate Logto with Server Actions in this guide.
To get started, make sure you have the following:
If you are self-hosting Logto, refer to the Logto "Get started" documentation to set up your Logto instance.
Open Logto Console by entering the URL https://cloud.logto.io/ if you are using Logto Cloud, or the endpoint you have set up for self-hosting.
Next, navigate to the "Applications" tab and click on "Create application".
In the modal that appears, choose "Next.js (App Router)" and provide an application name, such as "Next.js App". Then click on "Create application”.
You will be directed to a tutorial page in Logto. Click on "Finish and done" to proceed to the Application details page.
In the "Redirect URIs" section, enter the following value:
For example, if you are hosting Next.js on http://localhost:3000, the value should be:
Click on the "Save Changes" button at the bottom. Once successful, keep this page open as it will be useful for the Next.js configuration.
Ensure you have a project with the latest version of Next.js. If you don't have one yet, you could follow the offical installation guide to create one.
At the time of writing this guide, the feature is experimental and requires activation in the next.config.js
Start by install the @logto/next module using npm as follows:
You can alse use yarn or pnpm.
Then let's create some functions as "server actions”, create the new file libraries/logto.ts:
In this file, we export four functions for authentication purposes. Note the first line, "use server" indicates that the code in the file can only run on the server side. We use "next/headers" to manage cookie-based sessions.
"user server": https://react.dev/reference/react/use-server"next/headers" to manage cookies: https://nextjs.org/docs/api-reference/next/headersThe above functions we exported can be called directly from the client side React component. That is the main advantage of using Server Actions. Let's go to the next chapter to see how to use these functions.
With the authentication functions in place, let's construct the page. We'll create two client components to initiate the sign in and out actions.
/app/sign-in.tsx:
Here we import the signIn function that was just defined in the previous chapter. Although the code is executed on the server side, this function can still be directly invoked by the <button> component when a user clicks the sign-in button. By doing this, we eliminate the need to write any REST API to handle the sign-in process. In fact, Next.js handles the "POST" request dispatcher details for us. Upon receiving the redirectUrl, we can call router.push to redirect to the Logto sign-in page.
/app/sign-out.tsx:
The sign-out process is similar to the sign-in process.
As a standard OIDC identity provider, Logto redirects users to a callback URL after authentication. We must, therefore, prepare a callback page to handle the sign-in result.
/app/callback/page.tsx
Here we use a client component with useEffect, that makes it easy to display a “loading” page for better user experience.
Now, let's make a minimal home page to exhibit the utility of the Logto SDK. If needed, protect any resource from unknown users by checking the isAuthenticated value and redirecting to the sign-in page or showing error messages.
app/page.tsx
As you can observe, this is a server component that obviates the need for useEffect and managing complex state changes.
Server actions offer a streamlined and straightforward way to implement authentication compared to traditional Next.js applications that rely on REST APIs.
The entire code sample can be found in this repository: https://github.com/logto-io/js/tree/master/packages/next-server-actions-sample
Why not give Logto Cloud a try and experience the ease in action?