Build your own sign-in-or-up page for your Expo web app

Build a sign-in-or-up page
Visit your new page
Next steps

This guide shows you how to use the <SignIn /> prebuilt component in order to build custom page that allows users to sign in or sign up within a single flow.

To set up separate sign-in and sign-up pages, follow this guide, and then follow the custom sign-up page guide.

This guide uses Expo Router and platform-specific extensions to build a sign-in-or-up page for the web. Expo Router requires a non-platform route alongside a platform-specific route, so create both files shown below.

Create both files in the following structure:

src/
└── app/
    ├── sign-in.tsx
    └── sign-in.web.tsx

The non-platform file renders the native <AuthView />. Because <AuthView /> doesn't navigate on its own, the example watches the session and redirects once authentication completes. The .web.tsx file renders the web <SignIn /> component, which allows users to sign in or sign up from a single flow.

src/app/sign-in.tsx

import { AuthView } from '@clerk/expo/native'
import { useSession } from '@clerk/expo'
import { useRouter } from 'expo-router'
import { useEffect } from 'react'

export default function Page() {
  const { session } = useSession()
  const router = useRouter()

  useEffect(() => {
    if (session?.status === 'active') {
      router.replace('/')
    }
  }, [session?.status, router])

  return <AuthView isDismissible={false} />
}

src/app/sign-in.web.tsx

import { SignIn } from '@clerk/expo/web'

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

Visit your new page

To run your project, use the following command:

npm

pnpm

yarn

bun

npm run web

pnpm run web

yarn web

bun run web

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

Edit on GitHub

Build your own sign-in-or-up page for your Expo web app

Visit your new page

Next steps

Create a custom sign-up page

Prebuilt components

Customization & localization

Build custom flows

Client-side helpers

Build your own sign-in-or-up page for your Expo web app

Feedback