Using Clerk Hosted Pages

Leverage Clerk Hosted Pages for your sign-up, sign-in, and user profile pages.

Clerk Hosted Pages are the fastest way to add authentication to your application. Clerk offers sign-up, sign-in, and user profile pages out of the box for every Clerk instance.

So, you can start using Clerk now without writing any code.

Clerk Hosted Pages implement password-based, passwordless, or magic link-based authentication. You can set these up on your domain, and match your website's theme by customizing the look-n-feel of the Hosted Pages from Clerk Dashboard.

By default, the URLs for your Hosted Pages are the following.

https://accounts.[your-domain].com/sign-in
https://accounts.[your-domain].com/sign-up
https://accounts.[your-domain].com/user

For development instances, Clerk will issue you a domain on "lcl.dev". In production, you'll need to supply your own domain. See production setup for more information.

You can redirect to them from your application using our Control Components or ClerkJS SDK.

You can also find and configure your instance's sign-up and sign-in links in the Paths section of your instance in Clerk Dashboard.

1
import { 
2
  useClerk,
3
  RedirectToSignIn,
4
  RedirectToSignUp,
5
  RedirectToUserProfile
6
} from "@clerk/clerk-react";
7

8
// Rendering the <RedirectToSignIn/> component will
9
// cause the browser to navigate to the Sign In URL
10
// and show the hosted Sign In page
11
function MyRedirectToSignIn() {
12
  return (
13
      <RedirectToSignIn/>
14
  )
15
}
16

17
// Rendering the <RedirectToSignUp/> component will
18
// cause the browser to navigate to the Sign Up URL
19
// and show the hosted Sign Up page
20
function MyRedirectToSignUp() {
21
  return (
22
      <RedirectToSignUp/>
23
  )
24
}
25

26
// You can also trigger a redirect programmatically 
27
// by calling the redirectToSignUp or redirectToSignIn
28
// methods 
29
function MyButtonRedirect() {
30
  const {redirectToSignUp, redirectToSignIn} = useClerk();
31

32
  return (
33
      <>
34
          <button onClick={redirectToSignUp}>
35
              Redirect to hosted Sign Up page
36
          </button>
37
          <button onClick={redirectToSignIn}>
38
              Redirect to hosted Sign In page
39
          </button>
40
      </>
41
  )
42
}

1
// Calling the redirectToSignUp method will
2
// cause the browser to navigate to the Sign In URL
3
// and show the hosted Sign Up page
4
window.Clerk.redirectToSignUp();
5

6
// Calling the redirectToSignIn method will
7
// cause the browser to navigate to the Sign In URL
8
// and show the hosted Sign In page
9
window.Clerk.redirectToSignIn();
10

11
// Calling the redirectToUserProfile method will
12
// cause the browser to navigate to the User Profile URL
13
// and show the hosted User Profile page
14
window.Clerk.redirectToUserProfile();