Server side Remix.js protected routes with supabase

auth.js

// app/context/auth.js

/*
 when supabase auth state changed we sent request with event type and access token to api endpoint
 to set or delete cookie using useFetcher
 https://remix.run/docs/en/v1/api/remix#fetchersubmit
*/

import { createContext, useEffect, useState } from 'react'
import { useAuthStateChange, useClient } from 'react-supabase'
import { useFetcher } from "remix";

const initialState = { session: null, user: null }

export const AuthContext = createContext(initialState)

export function AuthProvider({ children }) {
    const client = useClient()
    const [state, setState] = useState(initialState)
    const fetcher = useFetcher();

    useEffect(() => {
        const session = client.auth.session()
        setState({ session, user: session?.user ?? null })
    }, [])

    useAuthStateChange((event, session) => {
        console.log(`Supbase auth event: ${event}`, session)
        setState({ session, user: session?.user ?? null })
        fetcher.submit({ event: event,  access_token: session?.access_token}, { method: "post", action: "/api/auth" })
    })

    return <AuthContext.Provider value={state}>{children}</AuthContext.Provider>
}

auth.jsx

// app/routes/api/auth.jsx

// we check event type and set cookie to access token if login event or delete cookie on logout event

import { json } from "remix";
import { token_cookie } from "~/lib/cookie.server";

export const action = async ({request}) => {

    const body = await request.formData()

    if (!body.get('event'))
        return json({ok : false});

    if (body.get('event') === 'SIGNED_IN') {
        if (!body.get('access_token'))
            return json({ok: false});

        return json({ok:true}, {
            headers: {
                "Set-Cookie": await token_cookie.serialize(body.get('access_token'))
            }
        })
    }

    if (body.get('event') === 'SIGNED_OUT')
        return json({ok:true}, {
            headers: {
                "Set-Cookie": await token_cookie.serialize(null, {
                    maxAge: -1
                })
            }
        })
}

cookie.server.js

// app/lib/cookie.server.js
// create cookie, encrypt cookies value not required bucuse supabae access token is already in secure jwt format

import {createCookie} from "remix";

export const token_cookie = createCookie("sb:token", {
    domain: '',
    httpOnly: true,
    maxAge: 60 * 60 * 8,
    path: "/",
    sameSite: "lax",
});

protected.js

// app/routes/api/protected.js
// we give access to data if access token from cookie is valid

import {json} from "remix";
import {token_cookie} from "~/lib/cookie.server";
import {supabaseClient} from "~/lib/supabase";

export const loader = async ({request}) => {
  
  const token = await token_cookie.parse(
      request.headers.get("Cookie")
  );
  
  const { user, error} = await supabaseClient.auth.api.getUser(token)
  
  if (error)
    return json({"error":"you are not allowed to get this secret info"})
  
  return json({"data": "my cat eats soup everyday"})
}