Onboarding for your Clerk App in 3 Steps

1
{
2
	"metadata": "{{user.public_metadata}}"
3
}

1
export { };
2

3
declare global {
4
  interface CustomJwtSessionClaims {
5
    metadata: {
6
      onboardingComplete?: boolean;
7
    };
8
  }
9
}

1
import { authMiddleware } from "@clerk/nextjs";
2
import { redirectToSignIn } from "@clerk/nextjs/server";
3
import { NextRequest, NextResponse } from "next/server";
4

5
// This example protects all routes including api/trpc routes
6
// Please edit this to allow other routes to be public as needed.
7
// See https://clerk.com/docs/references/nextjs/auth-middleware for more information about configuring your Middleware
8
export default authMiddleware({
9
  publicRoutes: ["/"],
10
  afterAuth: async (auth, req: NextRequest, evt) => {
11
    const { userId, sessionClaims } = auth;
12

13
    // For user visiting /onboarding, don't try and redirect
14
    if (userId && req.nextUrl.pathname === "/onboarding") {
15
      return NextResponse.next();
16
    }
17

18
    // User isn't signed in and the route is private -- redirect to sign-in
19
    if (!userId && !auth.isPublicRoute) return redirectToSignIn({ returnBackUrl: req.url });
20

21
    // Catch users who don't have `onboardingComplete: true` in PublicMetadata
22
    // Redirect them to the /onboarding to complete onboarding
23
    if (userId && !sessionClaims?.metadata?.onboardingComplete) {
24
      const onboardingUrl = new URL("/onboarding", req.url);
25
      return NextResponse.redirect(onboardingUrl);
26
    }
27

28
    // User is logged in and the route is protected - let them view.
29
    if (userId && !auth.isPublicRoute) return NextResponse.next();
30

31
    // If the route is public, anyone can view it.
32
    if (auth.isPublicRoute) return NextResponse.next();
33
  }
34
});
35

36
export const config = {
37
  matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'],
38
};
39

1
'use server'
2

3
import { auth, clerkClient } from "@clerk/nextjs/server"
4

5
export const completeOnboarding = async () => {
6
  const { userId } = auth();
7

8
  if (!userId) {
9
    return { message: "No logged in user" };
10
  }
11

12
  try {
13
    await clerkClient.users.updateUser(userId, {
14
      publicMetadata: { onboardingComplete: true }
15
    });
16
    return { message: 'User updated' };
17
  } catch (e) {
18
    console.log('error', e);
19
    return { message: `Error updating user` };
20
  }
21
}
22

1
'use client'
2

3
import * as React from 'react'
4
import { useUser } from '@clerk/nextjs'
5
import { useRouter } from 'next/navigation'
6
import { completeOnboarding } from './_actions'
7

8

9
export default function Onboarding() {
10
  const { user } = useUser()
11
  const router = useRouter()
12

13
  const handleSubmit = async () => {
14
    await completeOnboarding()
15
    await user?.reload()
16
    router.push("/dashboard")
17
  }
18

19
  return (
20
    <>
21
      <form action={handleSubmit}>
22
        <button type="submit">Complete</button>
23
      </form>
24
    </>
25
  )
26
}