Next.js (server-side rendering)
This page provides a step-by-step guide on how to integrate the TypeScript SDK in a Next.js (>= 13.4) project with server-side rendering (SSR) using the app
router, server components, and middleware.
To illustrate our example, we will create a demo app which will allow you to retrieve your user's name and favorite ice cream flavor after they log in with sgID.
If you have not already obtained your client credentials via registration, please register your client before proceeding.
For this example, you should add:
1. [openid, myinfo.name]
as the scopes and
2. http://localhost:5001/success
as a redirect URL
Running the example locally
Step 1: Clone the repo
To run the example locally, clone from our source code by running:
Step 2: Update your environment variables
Update your .env
file with your client credentials.
Step 3: Run the example
Visit http://localhost:5001 to check that your app is running.
If you click on 'Login with Singpass' and authenticate with your Singpass mobile app, you should see your user info on the success screen.
Breaking the example down
In this section, we'll break down the different steps that our example app goes through.
Step 1: Initialize the SDK
In this step, we will create an instance of our SgidClient
class which will help us to interface with the sgID server.
In the .env
file created from the previous step, fill out your sgID credentials.
The main idea here is to load your sgID credentials in a secure way using environment variables instead of hard-coding them into your app.
Next, Initialize the SDK by calling the constructor and providing your client credentials.
Step 2: Initialize an in-memory store for sessions
To maintain session data across requests, we will need to initialize an in-memory store for our server.
In a production environment, your session data should be stored in a database but for our example, we will be using an in-memory store to reduce complexity.
Step 3: Create the middleware for setting a session ID in cookies
The purpose of this middleware is to generate a session ID and set it in the browser's cookies when the user visits the site. This session ID is important for the server to identify the browser and track the session data through the login flow.
Step 4: Create a button to redirect to /login
Now, we need to create a button to redirect the browser to the /login
page. Additionally, we will be creating an ice cream flavour selector in order to demonstrate the OAuth 2.0 protocol's ability to carry over state.
In the following examples, we will not include any styling in order to keep the code snippet short. If you would like to view and interact with an example with styling, feel free to refer to the source code.
As we will be using useState
, this component will be a client component.
Next, add the log in button to the home page as such.
Step 5: Create the /login
page which redirects to the authorization URL
/login
page which redirects to the authorization URLWhen the user clicks on the 'Login with Singpass' button, it should direct them to the /login
page which will generate the authorization URL to redirect the browser to.
The server function handleLogin
will do the following.
Retrieve the session ID from the browser cookies (that was set by the middleware)
Generate a PKCE pair (consisting of code challenge and code verifier)
Generate an authorization URL
Store the code verifier in the in-memory store with the session ID as the key
Redirect the browser to the authorization URL
Step 6: Create the login /success
page
/success
pageOnce the end-user has successfully authorized your application with their Singpass mobile app, the sgID server will redirect the browser to the provided redirect URL.
When the browser visits this URL, the following will happen.
The authorization code is retrieved from the URL search params
The code is exchanged for an access token
The user info is requested with the access token
The user info is stored in-memory for subsequent requests
The user info is used to generate the HTML page on the server
Now if you run your Next.js app, click on Login with Singpass
and complete the authorization flow with your Singpass mobile app, you should be brought to this success page where you can view your personal details as well as your ice cream flavour selected on the login page.
If this is sufficient for your application and you do not need user data for any other further actions, congratulations! You can stop reading here. However, if you would like to use user data on other routes and pages, continue on to the next step.
Step 7: Create a /userinfo page to fetch user info from session store
The purpose of this page is to demonstrate how to retrieve the user data stored in-memory for subsequent requests. We will simply be creating a dummy page that displays the user info just like in the previous step.
If you complete the log in flow once again but click on the 'View user info' button, you will be brought to this /login
page where you can view user data. To ensure that the user info has been properly stored in the in-memory store, try refreshing the page - you should see that the user info can still be fetched by the page.
Congratulations! 🎉
You have reached the end of the Next.js (SSR) step-by-step guide.
The source code for this example can be found here which includes an /logout
page (and middleware) for logging out, styling with Tailwind CSS, and a README on how to run the example locally.
If you want to find out more about how sgID works, click here to learn about the sgID protocol.
If you have more questions about sgID, check out our FAQ for answers to common questions.
Last updated