Alright, let's kick things off by initializing Supabase in your project. Make sure you've got your Supabase URL and the public anon key handy:

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

const supabaseUrl = 'https://your-supabase-url.supabase.co';
const supabaseKey = 'your-supabase-anon-key';
const supabase = createClient(supabaseUrl, supabaseKey);

Next up, let's handle user sign-ups. Use the signUp method from Supabase:

const { user, session, error } = await supabase.auth.signUp({
  email: '[email protected]',
  password: 'your-password'
});

Don't forget to handle any errors and give users some feedback if something goes wrong.

Now, for signing in users, you'll want to use the signIn method:

const { user, session, error } = await supabase.auth.signIn({
  email: '[email protected]',
  password: 'your-password'
});

Once they're signed in, make sure to store the user session for later use.

You'll need to store the session info somewhere safe, like local storage. Here's how you can do that:

if (session) {
  localStorage.setItem('supabaseSession', JSON.stringify(session));
}

When the user comes back, you'll want to retrieve the session data to keep them logged in:

const persistedSession = localStorage.getItem('supabaseSession');
const currentSession = persistedSession ? JSON.parse(persistedSession) : null;

if (currentSession) {
  await supabase.auth.setSession(currentSession);
}

Supabase sessions don't last forever. To refresh the session token, use the refreshToken method:

const { user, session, error } = await supabase.auth.signIn({
  refreshToken: 'your-refresh-token'
});

Make sure to update your stored session data after refreshing the token.

To sign out users, use the signOut method:

const { error } = await supabase.auth.signOut();

And when they sign out, clear any stored session data:

localStorage.removeItem('supabaseSession');

You can also listen for real-time authentication state changes:

supabase.auth.onAuthStateChange((event, session) => {
  if (event === 'SIGNED_IN') {
    localStorage.setItem('supabaseSession', JSON.stringify(session));
  } else if (event === 'SIGNED_OUT') {
    localStorage.removeItem('supabaseSession');
  }
});

This way, your app stays in sync with the user's authentication state.