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

suplere/nhost-nextjs-app-router

Nhost with Next.js Server Components

Authentication

Get Started