Authentication

Add user signup, login, and session management to your INSTROC application.

Overview

INSTROC authentication provides:

• Email/password signup and login
• Social OAuth (Google, GitHub, etc.)
• Magic link (passwordless) login
• Session management
• Protected routes

Quick Setup

Using AI

Ask the AI to add authentication:

Add user authentication to my app with login and signup pages

Add Google sign-in to my app

Protect the dashboard page so only logged-in users can access it

Manual Setup

Import the auth utilities:

import { auth } from '@/lib/backend';

Email/Password Auth

Sign Up

const { data, error } = await auth.signUp({
  email: 'user@example.com',
  password: 'securepassword',
  options: {
    data: {
      full_name: 'John Doe',
    }
  }
});

Sign In

const { data, error } = await auth.signInWithPassword({
  email: 'user@example.com',
  password: 'securepassword',
});

Sign Out

await auth.signOut();

Social OAuth

Available Providers

Provider	Setup Required
Google	Client ID and Secret
GitHub	Client ID and Secret
Discord	Client ID and Secret
Twitter	API Key and Secret
Apple	Service ID and Key

Configure Provider

1. Go to Project Settings → Authentication
2. Click Providers
3. Enable your desired provider
4. Enter credentials from the provider's developer console

Sign In with OAuth

const { data, error } = await auth.signInWithOAuth({
  provider: 'google',
  options: {
    redirectTo: 'https://yourapp.instroc.app/dashboard'
  }
});

OAuth Button Example

function GoogleSignIn() {
  const handleGoogleLogin = async () => {
    const { error } = await auth.signInWithOAuth({
      provider: 'google'
    });
    if (error) console.error(error);
  };

  return (
    <button onClick={handleGoogleLogin}>
      Sign in with Google
    </button>
  );
}

Magic Link (Passwordless)

Send a login link via email:

const { error } = await auth.signInWithOtp({
  email: 'user@example.com',
  options: {
    emailRedirectTo: 'https://yourapp.instroc.app/dashboard'
  }
});

User clicks the link and is automatically signed in.

Session Management

Get Current User

const { data: { user } } = await auth.getUser();

if (user) {
  console.log('Logged in as:', user.email);
} else {
  console.log('Not logged in');
}

Get Session

const { data: { session } } = await auth.getSession();

if (session) {
  // Access token for API calls
  console.log('Token:', session.access_token);
}

Listen for Auth Changes

const { data: { subscription } } = auth.onAuthStateChange(
  (event, session) => {
    if (event === 'SIGNED_IN') {
      console.log('User signed in');
    } else if (event === 'SIGNED_OUT') {
      console.log('User signed out');
    }
  }
);

// Cleanup
subscription.unsubscribe();

Protected Routes

Client-Side Protection

'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { auth } from '@/lib/backend';

export default function Dashboard() {
  const router = useRouter();
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    auth.getUser().then(({ data: { user } }) => {
      if (!user) {
        router.push('/login');
      } else {
        setUser(user);
      }
      setLoading(false);
    });
  }, []);

  if (loading) return <div>Loading...</div>;
  if (!user) return null;

  return <div>Welcome, {user.email}!</div>;
}

Server-Side Protection

import { createClient } from '@/lib/supabase/server';
import { redirect } from 'next/navigation';

export default async function Dashboard() {
  const supabase = await createClient();
  const { data: { user } } = await supabase.auth.getUser();

  if (!user) {
    redirect('/login');
  }

  return <div>Welcome, {user.email}!</div>;
}

User Data

User Metadata

Store custom data with the user:

// On signup
const { data } = await auth.signUp({
  email: 'user@example.com',
  password: 'password',
  options: {
    data: {
      full_name: 'John Doe',
      avatar_url: 'https://...',
    }
  }
});

// Access later
const { data: { user } } = await auth.getUser();
console.log(user.user_metadata.full_name);

Update User Data

const { data, error } = await auth.updateUser({
  data: {
    full_name: 'Jane Doe'
  }
});

Password Management

Reset Password

Send reset email:

const { error } = await auth.resetPasswordForEmail(
  'user@example.com',
  {
    redirectTo: 'https://yourapp.instroc.app/reset-password'
  }
);

Update Password

const { error } = await auth.updateUser({
  password: 'newsecurepassword'
});

Email Verification

Enable email confirmation in settings:

1. Go to Project Settings → Authentication
2. Enable Email Confirmation
3. Customize confirmation email template

// Resend confirmation email
const { error } = await auth.resend({
  type: 'signup',
  email: 'user@example.com'
});

Security Best Practices

Password Requirements

Set minimum password strength:

• Minimum 8 characters
• Mix of letters, numbers, symbols
• No common passwords

Rate Limiting

Built-in protection against brute force:

• 5 login attempts per minute per IP
• Lockout after failed attempts

Session Security

• Tokens expire after 1 hour (configurable)
• Refresh tokens for extended sessions
• Secure, HTTP-only cookies

Multi-Factor Authentication

Enable 2FA for additional security (coming soon).