Why Supabase Auth handles identity - See It in Action

Why Supabase Auth Handles Identity

📖 Scenario: You are building a simple web app that needs to know who the user is. To do this, you will use Supabase Auth, which helps manage user identity securely and easily.

🎯 Goal: Learn how to set up Supabase Auth to handle user identity by creating a user session, configuring authentication settings, and retrieving the current user's information.

📋 What You'll Learn

Create a Supabase client with the project URL and anon key

Set up authentication configuration with redirect URLs

Write code to sign in a user with email and password

Retrieve and display the current authenticated user's ID

💡 Why This Matters

🌍 Real World

Supabase Auth is used in real apps to securely identify users without building complex authentication systems from scratch.

💼 Career

Understanding how to handle user identity with Supabase Auth is valuable for cloud developers building modern web and mobile applications.

1

Create the Supabase client

Create a variable called supabase by calling createClient with the exact project URL "https://xyzcompany.supabase.co" and anon key "public-anon-key".

Supabase

# Your code here

Need a hint?

Use createClient from @supabase/supabase-js with the exact URL and key.

2

Configure authentication settings

Create a constant called authConfig as an object with a property redirectTo set to "https://yourapp.com/welcome".

Supabase

import { createClient } from '@supabase/supabase-js';

const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key');

// Your code here

Need a hint?

Set redirectTo to the welcome page URL where users go after sign-in.

3

Sign in a user with email and password

Write an async function called signInUser that calls supabase.auth.signInWithPassword with an object containing email: '[e-mail]' and password: 'password123', passing authConfig as the second argument.

Supabase

import { createClient } from '@supabase/supabase-js';

const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key');

const authConfig = { redirectTo: 'https://yourapp.com/welcome' };

// Your code here

Need a hint?

Use signInWithPassword with email and password, and pass authConfig for redirect.

4

Retrieve and display the current user's ID

Write a function called getCurrentUserId that returns supabase.auth.getUser() and extracts the id from the data.user object.

Supabase

import { createClient } from '@supabase/supabase-js';

const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key');

const authConfig = { redirectTo: 'https://yourapp.com/welcome' };

async function signInUser() {
  const { data, error } = await supabase.auth.signInWithPassword({
    email: '[e-mail]',
    password: 'password123'
  }, authConfig);
}

// Your code here

Need a hint?

Use supabase.auth.getUser() to get the current user and return their id.