Authentication: Building Login Features

Create a login page.
- Email input field
- "Send Login Link" button
- Use Supabase Auth's Magic Link
- Show loading state and success message

// Magic Link login request
const { error } = await supabase.auth.signInWithOtp({
  email: email,
  options: {
    emailRedirectTo: window.location.origin + '/dashboard'
  }
})

Add Google and GitHub social login buttons to the login page.
Use Supabase Auth's signInWithOAuth.
Style buttons with each brand's colors.

// Google login
await supabase.auth.signInWithOAuth({
  provider: 'google',
  options: { redirectTo: window.location.origin + '/dashboard' }
})
 
// GitHub login
await supabase.auth.signInWithOAuth({
  provider: 'github',
  options: { redirectTo: window.location.origin + '/dashboard' }
})

// Get currently logged in user
const { data: { user } } = await supabase.auth.getUser()
 
if (user) {
  console.log('Logged in:', user.email)
} else {
  console.log('Not logged in')
}

Modify the header.
- If not logged in: "Login" button
- If logged in: user email, profile icon, "Logout" button

Check Supabase session to handle this.

const handleLogout = async () => {
  await supabase.auth.signOut()
  router.push('/') // Navigate to home
}

Create Next.js middleware:
- All pages starting with /dashboard require login
- If not logged in, redirect to /login
- If already logged in and going to /login, redirect to /dashboard

Check Supabase session to handle this.

-- Enable RLS on profiles table
ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
 
-- Profiles are publicly viewable (for public profile pages)
CREATE POLICY "Profiles are publicly viewable"
ON profiles FOR SELECT
USING (true);
 
-- Can only create own profile
CREATE POLICY "Users can create own profile"
ON profiles FOR INSERT
WITH CHECK (auth.uid() = user_id);
 
-- Can only update own profile
CREATE POLICY "Users can update own profile"
ON profiles FOR UPDATE
USING (auth.uid() = user_id);
 
-- Enable RLS on links table
ALTER TABLE links ENABLE ROW LEVEL SECURITY;
 
-- Links are publicly viewable (for public profile pages)
CREATE POLICY "Links are publicly viewable"
ON links FOR SELECT
USING (true);
 
-- Can only create links for own profile
CREATE POLICY "Users can create own links"
ON links FOR INSERT
WITH CHECK (profile_id IN (
  SELECT id FROM profiles WHERE user_id = auth.uid()
));
 
-- Can only update/delete own links
CREATE POLICY "Users can update own links"
ON links FOR UPDATE
USING (profile_id IN (
  SELECT id FROM profiles WHERE user_id = auth.uid()
));
 
CREATE POLICY "Users can delete own links"
ON links FOR DELETE
USING (profile_id IN (
  SELECT id FROM profiles WHERE user_id = auth.uid()
));

Implement authentication with Clerk.
Use @clerk/nextjs package.
Include social login (Google, GitHub).

// Clerk usage example
import { SignIn, SignUp, UserButton } from '@clerk/nextjs';
 
// Login page
export default function LoginPage() {
  return <SignIn />;
}
 
// User button in header
<UserButton afterSignOutUrl="/" />

Implement authentication with Auth.js (NextAuth).
Use next-auth package.
Include Google, GitHub, email login.
Store sessions in DB with Prisma adapter.

// Auth.js setup example
import NextAuth from 'next-auth';
import Google from 'next-auth/providers/google';
import GitHub from 'next-auth/providers/github';
 
export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [Google, GitHub],
});

Implement authentication with Firebase Auth.
Use firebase package.
Include Google, GitHub social login.

Implement authentication with Lucia.
Use lucia package.
Store sessions in Supabase.