Authentication

Complete authentication system with Better Auth

Installation

1

Install the Package

Add Authentication to your project using the Tailar CLI:

pnpm dlx tailar@latest add auth
2

Set Environment Variables

Create a `.env` file in the root of your project and add the following environment variables:

.env
1
# App Configuration
2
NEXT_PUBLIC_APP_URL="http://localhost:3000"
3
 
4
# Auth Configuration
5
BETTER_AUTH_URL="http://localhost:3000"
6
BETTER_AUTH_SECRET="your-secret-key-here-replace-with-secure-random-string"
7
# Generate a secure random string using: openssl rand -base64 32
8
 
9
# Google OAuth (Optional)
10
# Uncomment and fill these if you want to enable Google authentication
11
# GOOGLE_CLIENT_ID="your_google_client_id"
12
# GOOGLE_CLIENT_SECRET="your_google_client_secret"

Preview

Explore representative UI flows and snippets generated for this module (same previews as on the home page modules section).

Login
Enter your email and password to access your account
Forgot your password?
Or continue with

Don't have an account? Sign Up

File Tree

The following files are installed when you add Authentication:

File Structure
1
├─ app/
2
│  ├─ (auth)/
3
│  │  ├─ login/
4
│  │  │  └─ page.tsx
5
│  │  ├─ signup/
6
│  │  │  └─ page.tsx
7
│  │  ├─ forgot-password/
8
│  │  │  └─ page.tsx
9
│  │  └─ reset-password/
10
│  │     └─ page.tsx
11
│  ├─ (protected)/
12
│  │  ├─ (app)/
13
│  │  │  ├─ home/
14
│  │  │  │  └─ page.tsx
15
│  │  │  ├─ layout.tsx
16
│  │  │  └─ settings/
17
│  │  │     ├─ account/
18
│  │  │     │  └─ page.tsx
19
│  │  │     └─ layout.tsx
20
│  │  └─ layout.tsx
21
│  ├─ api/
22
│  │  └─ auth/
23
│  │     └─ [...alll]/
24
│  │        └─ route.ts
25
│  └─ layout.tsx
26
├─ components/
27
│  ├─ auth/
28
│  │  ├─ login-form.tsx
29
│  │  ├─ signup-form.tsx
30
│  │  ├─ forgot-password-form.tsx
31
│  │  ├─ reset-password-form.tsx
32
│  │  ├─ account-details-form.tsx
33
│  │  ├─ account-language-form.tsx
34
│  │  ├─ delete-account-form.tsx
35
│  │  ├─ auth-divider.tsx
36
│  │  ├─ auth-error-boundary.tsx
37
│  │  ├─ auth-form.tsx
38
│  │  ├─ auth-provider-wrapper.tsx
39
│  │  ├─ protected.tsx
40
│  │  ├─ social-button.tsx
41
│  │  └─ verify-email.tsx
42
│  └─ settings/
43
│     ├─ setting-tabs.tsx
44
│     ├─ settings-form.tsx
45
│     └─ settings-section.tsx
46
├─ lib/
47
│  └─ auth/
48
│     ├─ config.ts
49
│     ├─ context.tsx
50
│     ├─ hooks.ts
51
│     ├─ index.ts
52
│     ├─ templates.tsx
53
│     ├─ types.ts
54
│     └─ actions/
55
│        ├─ auth.ts
56
│        ├─ index.ts
57
│        ├─ password.ts
58
│        ├─ session.ts
59
│        ├─ user.ts
60
│        └─ deletion-rules.ts
61
├─ messages/
62
│  ├─ en.json
63
│  ├─ es.json
64
│  └─ fr.json
65
└─ prisma/
66
   └─ schema/
67
      └─ auth.prisma

Usage

Once you've installed Authentication, you can start using the following actions:

signInWithEmail

Sign in a user with email and password.

1
import { signInWithEmail } from '@/lib/auth/actions'
2
 
3
await signInWithEmail(email, password)

signUpWithEmail

Create a new user account with email and password.

1
import { signUpWithEmail } from '@/lib/auth/actions'
2
 
3
await signUpWithEmail(email, password, name)

signInWithGoogle

Sign in a user with Google OAuth.

1
import { signInWithGoogle } from '@/lib/auth/actions'
2
 
3
await signInWithGoogle()

signOutAction

Sign out the current user.

1
import { signOutAction } from '@/lib/auth/actions'
2
 
3
await signOutAction()

getSession

Get the current user session. Returns null if not authenticated.

1
import { getSession } from '@/lib/auth'
2
 
3
const session = await getSession()
4
if (session) {
5
  console.log('User:', session.user)
6
}

updateUser

Update the current user's profile information.

1
import { updateUser } from '@/lib/auth/actions'
2
 
3
await updateUser({ name: 'New Name', image: 'https://...' })

forgotPassword

Send a password reset email to the user.

1
import { forgotPassword } from '@/lib/auth/actions'
2
 
3
await forgotPassword(email)

resetPassword

Reset the user's password using a reset token.

1
import { resetPassword } from '@/lib/auth/actions'
2
 
3
await resetPassword(token, newPassword)

useAuthActions

React hook for authentication operations in client components. Provides signIn, signUp, signOut, and other auth methods.

1
import { useAuthActions } from '@/lib/auth/hooks'
2
 
3
function LoginForm() {
4
  const { signIn, isLoading, error } = useAuthActions()
5
  
6
  const handleSubmit = async () => {
7
    await signIn(email, password)
8
  }
9
}

useAuth

React hook to access the current user session in client components.

1
import { useAuth } from '@/lib/auth/context'
2
 
3
function Profile() {
4
  const { user, session } = useAuth()
5
  return <div>Welcome {user?.name}</div>
6
}