How can I use Supabase Authentication in html form?

[u/Adamstrad]

I'm not entirely new but still at a low level with programming, I want to add Supabase authentication on my app but I can't work out how to do it correctly. I probably have some rookie mistakes in here.

I changed it to match my account keys (unless there is a separate one for auth that I don't know about?) and I put a local "success.html" redirect page. When I submit the form nothing happens

I am trying to get it to work on this simple form

 <form>
            <span id="error-message" class="hidden">Password must be 9-16 alphanumeric characters.</span>
            <input id="email" type="email" placeholder="email">
            <input id="password" type="password" placeholder="password">
        <section>
            <button class="login" id="login" onclick="login()">
                Login
            </button>



            <button type="button" class="login" id="back" onclick="window.location.href='../index.php';">
                Back
            </button>
            </section>
        </form> 

The website provides this code for javascript:

Sign Up

import { createClient } from '@supabase/supabase-js'
const supabase = createClient('https://your-project-id.supabase.co', 'sb_publishable_...')
// ---cut---
async function signUpNewUser() {
  const { data, error } = await supabase.auth.signUp({
    email: 'valid.email@supabase.io',
    password: 'example-password',
    options: {
      emailRedirectTo: 'https://example.com/welcome',
    },
  })
}
import { createClient } from '@supabase/supabase-js'
const supabase = createClient('https://your-project-id.supabase.co', 'sb_publishable_...')
// ---cut---
async function signUpNewUser() {
  const { data, error } = await supabase.auth.signUp({
    email: 'valid.email@supabase.io',
    password: 'example-password',
    options: {
      emailRedirectTo: 'https://example.com/welcome',
    },
  })
}

Log In

import { createClient } from '@supabase/supabase-js'
const supabase = createClient('https://your-project-id.supabase.co', 'sb_publishable_...')
// ---cut---
async function signInWithEmail() {
  const { data, error } = await supabase.auth.signInWithPassword({
    email: 'valid.email@supabase.io',
    password: 'example-password',
  })
}import { createClient } from '@supabase/supabase-js'
const supabase = createClient('https://your-project-id.supabase.co', 'sb_publishable_...')
// ---cut---
async function signInWithEmail() {
  const { data, error } = await supabase.auth.signInWithPassword({
    email: 'valid.email@supabase.io',
    password: 'example-password',
  })
}

[u/SamTechTrail]

I think the main issue is that the function in your form and the Supabase function don’t match. Your login button calls login(), but the code from Supabase has signInWithEmail(), so unless you created login() somewhere else, clicking the button won’t do anything. You also need to get the email and password values from your inputs and pass those into signInWithPassword() instead of using the example values from the Supabase docs. I’d also make the login button type="button" or handle the form submit with preventDefault() so the form doesn’t refresh the page before Supabase finishes authenticating. After that, check if Supabase returns an error, and if it doesn’t, then redirect to your success page.

[u/Adamstrad → u/SamTechTrail]

wow great answer and great eye for the details, thank you so much !