Pages (React)

The most common way developers protect pages in Next.js is using our Control Components.

<SignedIn/>: Renders its children only when a user is signed in
<SignedOut/>: Renders its children only when there's no active user

The following example shows you how to compose control components in _app at the root of your /pages directory.

You will also need to go to the dashboard and update the sign-in and sign-up paths to /sign-in and /sign-up.

1
import { ClerkProvider, SignedIn, SignedOut, RedirectToSignIn } from '@clerk/nextjs';
2
import { useRouter } from 'next/router';
3

4
//  List pages you want to be publicly accessible, or leave empty if
5
//  every page requires authentication. Use this naming strategy:
6
//   "/"              for pages/index.js
7
//   "/foo"           for pages/foo/index.js
8
//   "/foo/bar"       for pages/foo/bar.js
9
//   "/foo/[...bar]"  for pages/foo/[...bar].js
10
const publicPages = ["/sign-in/[[...index]]", "/sign-up/[[...index]]"];
11

12
function MyApp({ Component, pageProps }) {
13
  // Get the pathname
14
  const { pathname } = useRouter();
15

16
  // Check if the current route matches a public page
17
  const isPublicPage = publicPages.includes(pathname);
18

19
  // If the current route is listed as public, render it directly
20
  // Otherwise, use Clerk to require authentication
21
  return (
22
    <ClerkProvider {...pageProps}>
23
      {isPublicPage ? (
24
        <Component {...pageProps} />
25
      ) : (
26
        <>
27
          <SignedIn>
28
            <Component {...pageProps} />
29
          </SignedIn>
30
          <SignedOut>
31
            <RedirectToSignIn />
32
          </SignedOut>
33
        </>
34
      )}
35
    </ClerkProvider>
36
  );
37
}
38

39
export default MyApp;

1
import {
2
  ClerkProvider,
3
  SignedIn,
4
  SignedOut,
5
  RedirectToSignIn,
6
} from "@clerk/nextjs";
7
import { AppProps } from "next/app";
8
import { useRouter } from "next/router";
9

10
//  List pages you want to be publicly accessible, or leave empty if
11
//  every page requires authentication. Use this naming strategy:
12
//   "/"              for pages/index.js
13
//   "/foo"           for pages/foo/index.js
14
//   "/foo/bar"       for pages/foo/bar.js
15
//   "/foo/[...bar]"  for pages/foo/[...bar].js
16
const publicPages = ["/sign-in/[[...index]]", "/sign-up/[[...index]]"];
17

18
function MyApp({ Component, pageProps } : AppProps) {
19
  // Get the pathname
20
  const { pathname } = useRouter();
21

22
  // Check if the current route matches a public page
23
  const isPublicPage = publicPages.includes(pathname);
24

25
  // If the current route is listed as public, render it directly
26
  // Otherwise, use Clerk to require authentication
27
  return (
28
    <ClerkProvider {...pageProps}>
29
      {isPublicPage ? (
30
        <Component {...pageProps} />
31
      ) : (
32
        <>
33
          <SignedIn>
34
            <Component {...pageProps} />
35
          </SignedIn>
36
          <SignedOut>
37
            <RedirectToSignIn />
38
          </SignedOut>
39
        </>
40
      )}
41
    </ClerkProvider>
42
  );
43
}
44

45
export default MyApp;

Accessing auth state

The useAuth hook is a convenient way to access the current auth state. This hook provides the minimal information needed for data-loading and helper methods to manage the current active session.

1
import { useAuth } from '@clerk/nextjs';
2
import { supabase } from './supabaseClient';
3

4
function SupabasePage() {
5
  const { getToken, isLoaded, isSignedIn } = useAuth();
6
  
7
  if (!isLoaded || !isSignedIn) {
8
    // You can handle the loading or signed state separately
9
    return null;
10
  }
11
  
12
  const fetchDataFromSupabase = async () => {
13
    const token = await getToken({ template: 'supabase' });
14
    supabase(token)
15
    const { data } = await supabase.from('your-table').select("*");
16
    return data;
17
  }
18
  
19
  return <div>...</div>;
20
}
21

22
export default SupabasePage;

Example Response

{
  sessionId: 'sess_2GaMqUCB3Sc1WNAkWuNzsnYVVEy',
  userId: 'user_2F2u1wtUyUlxKgFkKqtJNtpJJWj',
  orgId: null,
  getToken: [AsyncFunction (anonymous)],
  claims: {
    azp: 'http://localhost:3000',
    exp: 1666622607,
    iat: 1666622547,
    iss: 'https://clerk.quiet.muskox-85.lcl.dev',
    nbf: 1666622537,
    sid: 'sess_2GaMqUCB3Sc1WNAkWuNzsnYVVEy',
    sub: 'user_2F2u1wtUyUlxKgFkKqtJNtpJJWj'
  }
}

More detailed information about the fields in this object can be found in the Authentication Object documentation.