Engineering

Next.js SSR authentication with Clerk

Colin Sidoti

Colin Sidoti

Next.js SSR authentication is easy with Clerk - just a few lines of code to get started.

What is Server-Side Rendering (SSR) for React?

React was originally built to run on the client. Once React started, hooks would run to load data, and eventually a full page would be generated.

But since React is just a Javascript library, there was no reason it couldn't run on a server, too. Server-side rendering (SSR) runs React on the server to generate a page's initial HTML (a.k.a the first render), then runs React again on the client to provide reactivity.

Server-side rendering is particularly helpful for pages that must be indexed in search engines, since search engines cannot index pages that are rendered client-side.

The bigger benefit, though, is that server-side render can reduce the complexity of an application and lead to fewer lines of code. This is especially true in the modern era, where frameworks like Next.js provide helpers that drastically reduce the setup time for SSR.

How to use SSR with Next.js?

Server-side rendering can be used by including export async function getServerSideProps() on any pages you need SSR. Below is an example of how a page would look when using SSR:

function Page({ data }) {
// use the data on our page
<div>{data.content}</div>
}
export async function getServerSideProps() {
// Fetch data from an API
const res = await fetch(`https://api.example.com/data`)
const data = await res.json()
// Pass data to the page via props
return { props: { data } }
}
export default Page

This example retrieves some data from api.example.com. Then, we pass the data to the UI using the return statement. Finally, in the UI, we present the data to the user.

You can read more about Server-side rendering in the Next.js SSR documentation.

Now that you have a basic understanding of how SSR works, let us investigate how Clerk and SSR can work together.

How to use Clerk with SSR?

Clerk allows you to verify a user is authenticated and to retrieve user profile data when using SSR. Below, we will cover how to implement both.

Securing pages with SSR

With Clerk and Next.js SSR, we can check if the user is authenticated and, if not, redirect them to the sign-in page without rendering anything on the client. Clerk provides a helper called withServerSideAuth, which allows you to access authentication information:

import { withServerSideAuth } from "@clerk/nextjs/ssr";
export const getServerSideProps = withServerSideAuth(({ req, resolvedUrl }) => {
const { sessionId } = req.auth;
if (!sessionId) {
return { redirect: { destination: "/sign-in?redirect_url=" + resolvedUrl } };
}
return { props: {} };
});

The snippet above checks to see if there is a session. If not, it will redirect the user to the sign-in page. Once the user has successfully authenticated, Clerk will redirect the user back to the page they were initially trying to access. Here is a quick GIF showing the process in action.

If you want to see it in action, check out this fully functional example that contains all the code you need for SSR authentication with a redirect back.

Retrieving userId or JWT templates

Server-side rendering gives you the opportunity to retrieve data from 3rd party APIs and your own database. When using Clerk, you have the option of retrieving the user ID, or if you are using a Clerk integration such as Hasura you can also retrieve the JWT ready for use.

Below is an example of retrieving a Hasura JWT token ready to retrieve data before sending the page to the user.

import { withServerSideAuth } from "@clerk/nextjs/ssr";
export const getServerSideProps = withServerSideAuth(async ({ req }) => {
const {sessionId,token } = req.auth;
if (!sessionId) {
return { redirect: { destination: "/sign-in?redirect_url=" + resolvedUrl } };
}
// use a token for your Clerk integrations
const hasuraToken = await getToken({ template: 'hasura' });
// retrieve data from your Hasura integration
return { props: {} };
});

If you aren’t using a JWT template or a Clerk integration you can just retrieve the userId and use that against your own database.

import { withServerSideAuth } from "@clerk/nextjs/ssr";
export const getServerSideProps = withServerSideAuth(async ({ req }) => {
const {sessionId,userId } = req.auth;
if (!sessionId) {
return { redirect: { destination: "/sign-in?redirect_url=" + resolvedUrl } };
}
// use the userId to retrieve your own data
return { props: {} };
});

Enabling Full SSR Mode

In some cases, you may need the full User object available to you. For example, if you need to retrieve the user’s primary email address

Clerk can use an additional network request to retrieve the full User object. To enable it, you will need to add { loadUser: true } to your SSR request. Then, the complete User object will be available:

import { withServerSideAuth } from "@clerk/nextjs/ssr";
export const getServerSideProps = withServerSideAuth(
async ({ req, resolvedUrl }) => {
const { sessionId, getToken, userId } = req.auth;
// retrieve the user object
const { user } = req;
// return the users primary email address.
const email = user.emailAddresses.find(email => {
return (email.id === user.primaryEmailAddressId);
});
// retrieve data using the email address.
const data = getDataFromEmail(email)
return { props: { data } };
},
{ loadUser: true }
);

Want to stay up to date with Clerk?

The best way to keep up with Clerk is to subscribe to our newsletter, we send out updates every week. Updates include new features, what we have been working on, blog posts you may have missed, and so much more!

You can subscribe by entering your email in the footer of this page.

Clerk Community Discord

Clerk has an active community Discord. When you join, you will find a place to:

  • Get help with issues
  • Find the latest Clerk news and sneak previews
  • Share your project with the Clerk community, and talk about your experience
  • Chat about the best practices, features, and tech you are working with

Join our Discord

Clerk Twitter

Our Twitter account (@ClerkDev) announces the latest features, improvements, and sneak peeks to Clerk. We would also be psyched if you tagged us in projects you have built, and we will reshare them with our community.

Start now, no strings attached

Start completely free for up to 500 monthly active users.
No credit card required.

Start building

Pricing

Learn more about our transparent per-user costs to estimate how much your company could save by implementing Clerk.

View pricing