AI-Base v0/Playground

Optional Dependencies: Some components in this playground may require additional packages. Each component will indicate if it needs specific packages to be installed. See the README for more information about our optional dependencies approach.

Authentication Components

Multi-Provider Auth

A unified authentication component that supports multiple providers

Clerk Authentication

Secure, feature-rich auth with Clerk

To enable Clerk auth, install @clerk/nextjs and uncomment the imports in this file.

Clerk is an optional dependency in this template

Note: To use Clerk, install @clerk/nextjs package and set up ClerkProvider in your layout.

View Component Details →

Clerk Auth Button

A simple sign-in button using Clerk (install @clerk/nextjs to enable)

View Component Details →

Usage Instructions

How to use authentication in your app

For complete setup instructions:

  • Check app/components/auth/examples/ClerkSetup.tsx for Clerk setup
  • Check app/components/auth/examples/ClerkUsage.tsx for usage examples
  • Use AuthProvider for a unified auth component