Nhost with Next.js Server Components

This quickstart showcases how to correctly add authentication to a Next.js 13 project using the new App Router and Server Components. The other parts of the SDK (Storage / GraphQL/ Functions) should work the same as before.

Authentication

Saving the auth session

To enable authentication with Server Components we have to store the auth session in a cookie. This should be done right after any signIn or signUp operation. See example here.

Oauth & refresh session middleware

Create a middleware at the root of your project that calls the helper method manageAuthSession. Feel free to copy paste the the contents of the /utils folder to your project. The second argument for manageAuthSession is for handling the case where there's an error refreshing the current session with the refreshToken stored in the cookie.

import { manageAuthSession } from '@utils/nhost'
import { NextRequest, NextResponse } from 'next/server'

export async function middleware(request: NextRequest) {
  return manageAuthSession(request, () =>
    NextResponse.redirect(new URL('/auth/sign-in', request.url))
  )
}

Protected routes

To make sure only authenticated users access some Server Components, wrap them in the Higher Order Server Component withAuthAsync.

import withAuthAsync from '@utils/auth-guard'

const MyProtectedServerComponent = async () => {
  return <h2>Protected</h2>
}

export default withAuthAsync(MyProtectedServerComponent)

Get Started

Clone the repository

git clone https://github.com/nhost/nhost
cd nhost

Install and build dependencies

pnpm install
pnpm build

Terminal 1: Start the Nhost Backend

Make sure you have the Nhost CLI installed.
```
cd examples/quickstarts/nhost-backend
nhost up
```

Terminal 2: Start the Next.js application

cd examples/quickstarts/nextjs-server-components
pnpm dev