Docs

Build sign in and sign up pages with prebuilt components on web

This guide shows you how to use the <SignIn /> and <SignUp /> prebuilt components in order to build custom sign-in and sign-up pages for your Expo web app.

This guide uses Expo Router and the platform-specific extensions to build the sign-up and sign-in pages specifically for the web platform.

Build a sign-up page

The following example demonstrates how to render the <SignUp /> component.

/app/sign-up.web.tsx
import { SignUp } from '@clerk/clerk-expo/web'

export default function Page() {
  return <SignUp />
}

Build a sign-in page

The following example demonstrates how to render the <SignIn /> component.

/app/sign-in.web.tsx
import { SignIn } from '@clerk/clerk-expo/web'

export default function Page() {
  return <SignIn />
}

Visit your new pages

To run your project, use the following command:

terminal
npm run web
terminal
yarn web
terminal
pnpm web

Visit your new custom pages locally at localhost:8081/sign-in and localhost:8081/sign-up.

More resources

Use the following guides to learn more about Clerk components, how to build custom flows for your native apps, and how to use Clerk's client-side helpers.

Prebuilt components

Learn more about Clerk's suite of components that let you quickly add authentication to your app.

Customization & localization

Learn how to customize and localize Clerk components.

Custom flows

Expo native apps require custom flows in place of prebuilt components. Learn more about custom flows.

Client-side helpers

Learn more about our client-side helpers and how to use them.

Feedback

What did you think of this content?

Last updated on