Authentication

Teta uses Supabase Auth to handle user authentication in your apps. You can add sign-up, sign-in, sign-out, and protected routes by describing what you need in the chat. Supabase Auth supports email/password, magic links, and OAuth providers like Google and GitHub.

Supabase Auth Overview

Supabase Auth is a full authentication system built on top of PostgreSQL. It provides:

• User management - Sign-up, sign-in, sign-out, password reset, and email verification.
• Session handling - JWT-based sessions with automatic token refresh.
• OAuth providers - Google, GitHub, Apple, Microsoft, and many more.
• Row-level security integration - Auth works directly with PostgreSQL RLS, so you can write policies like "only the post author can edit this row."
• User metadata - Store profile information alongside the auth record.

The Supabase client is pre-configured in your Teta project, so you can start adding auth immediately.

Adding Auth via Chat

The fastest way to add authentication is to ask the AI. Here are some prompts to get started:

• "Add email/password authentication to my app." - The AI creates sign-up and sign-in pages, a sign-out button, session management, and protected route logic.
• "Add a login page with Google OAuth." - Creates a login page with a Google sign-in button and handles the OAuth callback.
• "Protect the /dashboard route so only logged-in users can access it." - Adds server-side auth checks and redirects unauthenticated users to the login page.
• "Add a user profile page that shows the logged-in user's email and lets them update their display name." - Creates a profile page with a form connected to Supabase Auth user metadata.

What Gets Created

When you ask the AI to add authentication, it typically creates or modifies these files:

Sign-up page (src/routes/auth/signup/+page.svelte): A form with email and password fields. On submission, it calls supabase.auth.signUp() and handles success and error states.

Sign-in page (src/routes/auth/login/+page.svelte): A form with email and password fields. On submission, it calls supabase.auth.signInWithPassword() and redirects to the app on success.

Sign-out logic: A sign-out button or link, typically in the navigation bar, that calls supabase.auth.signOut() and redirects to the home page.

Auth hook (src/hooks.server.ts): Server-side middleware that checks the session on every request. This is where the Supabase client is initialized with the user's session cookies, making the authenticated user available in all server-side load functions.

Protected routes: Server load functions (+page.server.ts or +layout.server.ts) that check for an authenticated session and redirect to login if the user is not signed in.

The exact files and structure depend on your project, but these are the core pieces of a SvelteKit + Supabase Auth implementation.

OAuth Providers

Supabase supports dozens of OAuth providers. The most common ones for web apps are:

Google

1. Go to the Google Cloud Console and create OAuth 2.0 credentials.
2. Set the authorized redirect URI to your Supabase project's callback URL: https://your-project.supabase.co/auth/v1/callback.
3. Copy the Client ID and Client Secret.
4. In your Supabase dashboard, go to Authentication > Providers > Google and paste the credentials.
5. Ask the AI to "Add a Sign in with Google button to the login page."

GitHub

1. Go to GitHub Developer Settings and create a new OAuth App.
2. Set the authorization callback URL to: https://your-project.supabase.co/auth/v1/callback.
3. Copy the Client ID and Client Secret.
4. In your Supabase dashboard, go to Authentication > Providers > GitHub and paste the credentials.
5. Ask the AI to "Add a Sign in with GitHub button."

The OAuth flow is handled by Supabase. Your app redirects to the provider, the user authenticates, and Supabase handles the callback, creates or links the user account, and establishes a session.

Session Management

Supabase Auth uses JWT tokens stored in cookies for session management. The SvelteKit integration handles this automatically:

• Server-side: The hooks.server.ts file reads the session cookie on every request and makes the authenticated user available via event.locals.
• Client-side: The Supabase client listens for auth state changes and updates automatically when a user signs in, signs out, or their token refreshes.
• Token refresh: Access tokens have a short lifespan (default: 1 hour). The Supabase client automatically refreshes them using the refresh token stored in an HTTP-only cookie.

You generally do not need to manage sessions manually. The AI sets up the correct session handling when it adds auth to your project.

Protecting Routes

There are two levels of route protection in SvelteKit with Supabase Auth:

Server-Side Protection (Recommended)

Check the session in a server load function. This prevents unauthenticated users from seeing the page at all:

// src/routes/dashboard/+page.server.ts
import { redirect } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async ({ locals: { safeGetSession } }) => {
  const { session } = await safeGetSession();

  if (!session) {
    throw redirect(303, '/auth/login');
  }

  return { session };
};

Layout-Level Protection

To protect an entire section of your app (e.g., everything under /dashboard), use a layout server load function:

// src/routes/dashboard/+layout.server.ts
import { redirect } from '@sveltejs/kit';
import type { LayoutServerLoad } from './$types';

export const load: LayoutServerLoad = async ({ locals: { safeGetSession } }) => {
  const { session } = await safeGetSession();

  if (!session) {
    throw redirect(303, '/auth/login');
  }

  return { session };
};

Every page under the /dashboard directory inherits this protection. Unauthenticated users are redirected to the login page before any page content loads.

User Profile Data

Supabase Auth stores basic user information (email, phone, provider) in the auth.users table. For additional profile data, create a profiles table in the public schema:

create table profiles (
  id uuid references auth.users on delete cascade primary key,
  display_name text,
  avatar_url text,
  bio text,
  updated_at timestamptz default now()
);

-- Enable RLS
alter table profiles enable row level security;

-- Users can read any profile
create policy "Public profiles" on profiles
  for select using (true);

-- Users can update their own profile
create policy "Users update own profile" on profiles
  for update using (auth.uid() = id);

Ask the AI to "Create a profiles table and a profile edit page," and it will set up the table, policies, and UI for you.

Example: Adding Auth to a Blog

Here is a practical scenario. You have a blog built with Teta and want to add authentication so users can comment on posts and authors can manage their articles.

Step 1: "Add email/password authentication with sign-up and login pages." The AI creates the auth pages, session handling in hooks, and a sign-out button in the nav.

Step 2: "Protect the /admin route so only authenticated users can access it." The AI adds a server-side session check that redirects unauthenticated users.

Step 3: "Add a comments section to blog posts. Only logged-in users can comment. Show the commenter's email." The AI creates the comments table with RLS (anyone reads, authenticated users write), a comment form that only shows for logged-in users, and a comment list below each post.

Step 4: "Add Google sign-in as an alternative to email/password." The AI adds a Google OAuth button to the login and signup pages. You configure the Google credentials in the Supabase dashboard.

In four chat messages, you have a complete auth system with email login, Google OAuth, protected admin routes, and authenticated commenting.

FAQ

Can I use magic link (passwordless) authentication?

Yes. Supabase supports magic link authentication where users receive a sign-in link via email instead of entering a password. Ask the AI to "Add magic link authentication" and it will set up the flow, including the email input form and the callback handler.

How do I customize the authentication emails?

Supabase sends emails for verification, password reset, and magic links. You can customize the email templates in the Supabase dashboard under Authentication > Email Templates. You can change the text, add your branding, and modify the sender name.

What happens when a user's session expires?

The Supabase client automatically refreshes the session token before it expires. If the refresh token itself expires (after a long period of inactivity), the user is signed out and needs to sign in again. Your protected routes will redirect them to the login page.

Can I add role-based access control?

Yes. You can add a role column to your profiles table (e.g., "admin", "editor", "viewer") and use it in RLS policies. For example, only users with the "admin" role can delete posts. Ask the AI to "Add role-based access control with admin and user roles" for a complete implementation.

Is user data encrypted?

Passwords are hashed using bcrypt and never stored in plain text. Session tokens are JWTs signed with your project's secret key. All communication between your app and Supabase uses HTTPS. Supabase follows industry-standard security practices for authentication data.