Tweaking Supabase auth to set cookies for server-side languages.

index.js

const SUPABASE_URL = 'https://<project>.supabase.co';
const SUPABASE_KEY = 'fancy long key';

var supabase = supabase.createClient(SUPABASE_URL, SUPABASE_KEY);
supabase.auth.onAuthStateChange((event, session) => {
    console.log(event, session);
    setToken(session);
})
window.userToken = null;

document.addEventListener('DOMContentLoaded', function (event) {
    const signUpForm = document.querySelector('#sign-up');
    signUpForm.onsubmit = signUpSubmitted.bind(signUpForm)

    const logInForm = document.querySelector('#log-in');
    logInForm.onsubmit = logInSubmitted.bind(logInForm)

    const userDetailsButton = document.querySelector('#user-button');
    userDetailsButton.onclick = fetchUserDetails.bind(userDetailsButton)

    const logoutButton = document.querySelector('#logout-button');
    logoutButton.onclick = logoutSubmitted.bind(logoutButton)

    const gitHubButton = document.querySelector('#github-button');
    gitHubButton.onclick = githubSubmitted.bind(gitHubButton)
})

const githubSubmitted = (event) => {
    event.preventDefault()

    supabase.auth.signIn({provider: 'github'})
        .then((response) => {
            if (response.error)
                alert(response.error.message)
        })
        .catch((err) => {
            if (err.response)
                console.log(err.response.text)
        })
}

const signUpSubmitted = (event) => {
    event.preventDefault()
    const email = event.target[0].value
    const password = event.target[1].value

    supabase.auth.signUp({email, password})
        .then((response) => {
            if (response.error) alert(response.error.message)
        })
        .catch((err) => {
            alert(err.response.text)
        })
}

const logInSubmitted = (event) => {
    event.preventDefault()
    const email = event.target[0].value
    const password = event.target[1].value

    supabase.auth.signIn({email, password})
        .then((response) => {
            if (response.error)
                alert(response.error.message)
        })
        .catch((err) => {
            alert(err.response.text)
        })
}

const fetchUserDetails = () => {
    //alert(JSON.stringify(supabase.auth.user()));
    //alert(JSON.stringify(supabase.auth.session()));
    document.querySelector('#access-token').value = supabase.auth.session().access_token
    document.querySelector('#refresh-token').value = supabase.auth.session().refresh_token
}

const logoutSubmitted = (event) => {
    event.preventDefault()
    supabase.auth.signOut();
}

function setToken(response) {
    if (!response || !response.user) {
        console.log("response is null")
        document.cookie = "user-id=null;max-age=0";
        document.cookie = "access-token=null;max-age=0";
        document.cookie = "refresh-token=null;max-age=0";
        return;
    }

    if (response.user.confirmation_sent_at && !response.data.access_token) {
        alert('Confirmation Email Sent')
    } else {
        console.log("access " + response.access_token);
        console.log("refresh " + response.refresh_token);
        document.cookie = "access-token=" + response.access_token + ";max-age=3600";
        document.cookie = "refresh-token=" + response.refresh_token + ";max-age=3600";
        //alert('Logged in as ' + response.user.email)

        if (supabase.auth.user()) {
            document.cookie = "user-id=" + supabase.auth.user().id + ";max-age=3600";
        } else {
            document.cookie = "user-id=null;max-age=0";
        }
    }
}