Authentication

Add authentication to your app to protect pages and content from unauthorized access. The builder integrates with NextAuth.js to provide a robust authentication system with multiple provider options.

Setting Up Authentication

Enable authentication through the app settings panel. Here you can configure which authentication providers you want to use:

Configure authentication providers in the app settings

Available authentication providers:

• Email/Password
• Google
• GitHub
• Facebook
• X (Twitter)

When you enable authentication, NextAuth.js will be automatically added to your app with the selected providers configured.

Authentication Pages

When authentication is enabled, several pre-built pages are automatically added to your app:

• Login
• Register
• Forgot Password
• Profile

Authentication pages appear automatically in your pages menu

These pages come with a default design and functionality, but you can customize the props just like any other page in your app.

Using Authentication in Blocks

Once authentication is enabled, you can use NextAuth.js hooks in your block code to implement authentication-specific behavior:

Use NextAuth hooks like useSession in your block code

Example usage of the useSession hook to show different content based on auth status:

const { data: session } = useSession()

if (session) {
  return <div>Welcome {session.user.name}</div>
}

return <div>Please sign in</div>

Testing Authentication States

To test how your pages look in different authentication states, use the Authentication Status toggle in the editor toolbar's settings menu (three dots). This allows you to:

• Switch between authenticated and unauthenticated states
• Preview how your pages appear to different types of users
• Test authentication-dependent features without signing in/out

Protecting Pages

You can restrict access to entire pages to authenticated users only:

1. Open the page settings menu
2. Find the "Require authentication to access" section
3. Toggle the setting to enable authentication requirement