Supabase supports [a collection of auth strategies](https://supabase.com/docs/guides/auth) - Email and password, passwordless and OAuth. In this lesson, we look at implementing OAuth with GitHub. In order to do this, we [create a new GitHub OAuth app](https://github.com/settings/applications/new), and configure Supabase to use its Client ID and Secret. Additionally, we create a `` component that uses the Supabase client to sign users in and out. This identifies a problem that we don't have access to the environment variables required to create a Supabase client outside of loaders or actions. Therefore, we pipe through our `SUPABASE_URL` and `SUPABASE_ANON_KEY` from the Loader function, and create a singleton Supabase client, to use across our components. Lastly, we look at sharing this single instance of Supabase through the Outlet Context and declare types to ensure we have TypeScript helping us out throughout the application. ## Code Snippets **Expose environment variables from the server** ```tsx export const loader = async ({}: LoaderArgs) => { const env = { SUPABASE_URL: process.env.SUPABASE_URL!, SUPABASE_ANON_KEY: process.env.SUPABASE_ANON_KEY!, }; return json({ env }); }; ``` **Access `env` in component** ```tsx const { env } = useLoaderData(); ``` **Create a singleton Supabase client** ```tsx const [supabase] = useState(() => createClient(env.SUPABASE_URL, env.SUPABASE_ANON_KEY) ); ``` **Share global variables with Outlet Context** ```tsx ``` **Consuming Outlet Context** ```tsx const { supabase } = useOutletContext(); ``` **Logging in with GitHub** ```tsx await supabase.auth.signInWithOAuth({ provider: "github", }); ``` **Logging out** ```tsx await supabase.auth.signOut(); ``` **Entire root component** ```tsx import { json, LoaderArgs, MetaFunction } from "@remix-run/node"; import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData, } from "@remix-run/react"; import { createClient, SupabaseClient } from "@supabase/supabase-js"; import { useState } from "react"; import type { Database } from "db_types"; type TypedSupabaseClient = SupabaseClient; export type SupabaseOutletContext = { supabase: TypedSupabaseClient; }; export const meta: MetaFunction = () => ({ charset: "utf-8", title: "New Remix App", viewport: "width=device-width,initial-scale=1", }); export const loader = async ({}: LoaderArgs) => { const env = { SUPABASE_URL: process.env.SUPABASE_URL!, SUPABASE_ANON_KEY: process.env.SUPABASE_ANON_KEY!, }; return json({ env }); }; export default function App() { const { env } = useLoaderData(); const [supabase] = useState(() => createClient(env.SUPABASE_URL, env.SUPABASE_ANON_KEY) ); return ( ); } ``` ## Resources - [Supabase docs - login with GitHub](https://supabase.com/docs/guides/auth/auth-github) - [Remix docs - Outlet Context](https://remix.run/docs/en/v1/api/remix#useoutletcontext)