How to Set Up Supabase Auth in Any Vanilla JS Site

You don't need Next.js to use Supabase Auth. Here's the same flow our marketplace uses, in pure HTML + JS.

Step 1: Add the script

<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script>
  const SUPABASE_URL = 'https://<your-project>.supabase.co';
  const SUPABASE_ANON_KEY = 'eyJ...';
  const sb = supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
</script>

Step 2: Email sign-up

<form id="signup">
  <input name="email" type="email" required>
  <input name="password" type="password" required minlength="8">
  <button>Sign up</button>
</form>
<script>
  document.getElementById('signup').addEventListener('submit', async e => {
    e.preventDefault();
    const fd = new FormData(e.target);
    const { data, error } = await sb.auth.signUp({
      email: fd.get('email'),
      password: fd.get('password'),
      options: { emailRedirectTo: location.origin + '/auth-callback.html' }
    });
    if (error) alert(error.message);
    else alert('Check your email!');
  });
</script>

Step 3: Google OAuth

<button id="google">Sign in with Google</button>
<script>
  document.getElementById('google').addEventListener('click', async () => {
    await sb.auth.signInWithOAuth({
      provider: 'google',
      options: { redirectTo: location.origin + '/auth-callback.html' }
    });
  });
</script>

In Supabase dashboard → Authentication → Providers → enable Google + paste your OAuth client ID/secret from Google Cloud Console.

Step 4: Auth callback

/auth-callback.html — Supabase auto-handles the URL hash. Just redirect:

<script>
  // Supabase parses the hash automatically
  setTimeout(() => location.href = '/', 500);
</script>

Step 5: Check session anywhere

const { data: { session } } = await sb.auth.getSession();
if (session) console.log('Signed in as', session.user.email);

Step 6: Sign out

await sb.auth.signOut();

That's it. ~50 lines of code total, no framework. This is exactly what Nexora Aero uses.

Hire a Supabase developer →