Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.dev

Pages (React)

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

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.

Was this helpful?

Clerk © 2023