Guest mode

Quickstart

This quickstart will get you up and running with auth in about 10 minutes.

1. Add your signup form

React Next Vue HTML

Additional resources

Example on GitHub @userfront/next on npm Next.js example docs Deploy a sample app to Vercel Try a demo on Vercel

Install the Userfront Nextjs library

Install @userfront/next with npm.

Add the workspace Id to your environment

Your local environment needs to include your workspace Id.

Your workspace Id is demo1234 and can always be found on the Userfront dashboard home page.

You can find out more about workspace Id in our docs.

Add the Userfront provider to your layout

Wrap your layout's children with UserfrontProvider. The Userfront provider is responsible for initializing the Userfront client.

Make sure to pass your tenantId as a prop. The tenantId prop's value is your environment variable.

Create a page including the sign up component

Add a route folder (src/app/signup/) and page (src/app/signup/page.js)

Use the <SignupForm /> component.

View a working example

2. Use your signup form

Give it a try: fill out your signup form and submit it.

Upon successful signup, the form does 2 things:

Redirects the browser to /dashboard.
We'll edit this next.
Adds a secure access token named access.<YOUR WORKSPACE_ID> to your browser's cookies.
This token is a JWT with the user's information, which you can send to your own backend.

Your form is in test mode, which means it creates a user record in your test environment when the form is submitted.

Preview

This is a preview of your signup form.

Secured by Userfront

3. Set your redirect & domain

In your Redirect paths page, update the After-signup path to /home.

Now when you re-submit your signup form, you should be redirected to /home.

4. Add login and others

Follow the same process for your other tools:

Add a login form to your /login page.

Add a password reset form to your /reset page.

For logout most of our users typically choose to call Userfront.logout()from Userefront's core.js library directly.

Test mode vs live mode

Userfront forms and API calls operate in the context of a "mode", either live or test mode. When you deploy your forms to any of your live domains and the browser is using HTTPS, the forms will operate in live mode automatically, otherwise they will operate in test mode.

Read more about the differences between live & test mode here.

Finished

Congratulations, you've added auth to your site.

To enable live mode, add your website to the list of live domains on the Live domains page.