Build your own sign-in-or-up page for your Nuxt app with Browser
This guide shows you how to use the <SignIn /> component to build a 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.
Build a sign-in-or-up page
The following example demonstrates how to render the <SignIn /> component on a dedicated page using a Nuxt catch-all route.
<template>
<SignIn />
</template>Configure your sign-in-or-up page
Set the CLERK_SIGN_IN_URL environment variable to tell Browser where the <SignIn /> component is being hosted.
There are other environment variables that you can set to customize Browser's redirect behavior, such as CLERK_SIGN_IN_FORCE_REDIRECT_URL. Learn more about these environment variables and how to customize Browser's redirect behavior in the dedicated guide.
NUXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-inVisit your new page
Run your project with the following command:
npm run devpnpm run devyarn devbun run devVisit your new custom page locally at localhost:3000/sign-in.
Next steps
Learn more about Browser components, how to use them to create custom pages, and how to use Browser's client-side helpers using the following guides.
Create a custom sign-up page
Learn how to add a custom sign-up page to your Nuxt app with Browser's components.
Protect content and read user data
Learn how to use Browser's composables and helpers to protect content and read user data in your Nuxt app.
Client-side helpers
Learn more about Browser's client-side helpers and how to use them.
Prebuilt components
Learn how to quickly add authentication to your app using Browser's suite of components.
Feedback
Last updated on