Remix and Supabase Authentication

How to secure a Remix and Supabase application using Row Level Security

Thursday, December 9, 2021

NOTE: This tutorial is deprecated in favor of the official documentation.

TL;DR: Source and Demo

Here's a live demo

Link to the source code

Link to step by step commits

Introduction

This blog will focus on securing our Remix application with Supabase's Row Level Security (RLS) feature. If you want to know the context of what application I'm talking about, you can refer to my another blog.

Setting up Supabase

Instead of updating my database from the previous blog, I'm just going to re-create it.

Create a table to contain user_id

sqlCopy
CREATE TABLE words (  id bigint GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,  name varchar NOT NULL,  definitions varchar ARRAY NOT NULL,  sentences varchar ARRAY NOT NULL,  type varchar NOT NULL,  user_id uuid NOT NULL);

Add a foreign key in user_id pointing to auth.users

sqlCopy
1234alter table wordsadd constraint words_users_fkforeign key (user_id)references auth.users (id);

Create Row Level Security Supabase Policies

sqlCopy
CREATE POLICY "anon_select" ON public.words FOR SELECT USING (  auth.role() = 'anon' or auth.role() = 'authenticated');
CREATE POLICY "auth_insert" ON public.words FOR INSERT WITH CHECK (  auth.role() = 'authenticated');
CREATE POLICY "user_based__update" ON public.words FOR UPDATE USING (  auth.uid() = user_id);
CREATE POLICY "user_based_delete" ON public.words FOR DELETE USING (  auth.uid() = user_id);

Implement server-side utilities to manage Supabase session

Create server instance of Supabase client

app/utils/supabase.server.tsxCopy
123456import { createClient } from "@supabase/supabase-js";
const supabaseUrl = process.env.SUPABASE_URL as string;const supabaseKey = process.env.SUPABASE_ANON_KEY as string;
export const supabase = createClient(supabaseUrl, supabaseKey);

Use createCookieSessionStorage to help in managing our Supabase token

app/utils/supabase.server.tsxCopy
1234567891011121314151617181920212223// ...import { createCookieSessionStorage } from "remix";
// ...
const { getSession, commitSession, destroySession } =  createCookieSessionStorage({    // a Cookie from `createCookie` or the CookieOptions to create one    cookie: {      name: "supabase-session",
      // all of these are optional      expires: new Date(Date.now() + 3600),      httpOnly: true,      maxAge: 60,      path: "/",      sameSite: "lax",      secrets: ["s3cret1"],      secure: true,    },  });
export { getSession, commitSession, destroySession };

Create a utility to set the Supabase token from the Request

app/utils/supabase.server.tsxCopy
123456789// ...
export const setAuthToken = async (request: Request) => {  let session = await getSession(request.headers.get("Cookie"));
  supabase.auth.setAuth(session.get("access_token"));
  return session;};

Setting up authentication in the Remix side

Create client-side utilities for managing Supabase session

Create Supabase Provider and a custom hook which returns the Supabase instance

app/utils/supabase-client.tsxCopy
1234567891011121314151617import { SupabaseClient } from "@supabase/supabase-js";import React from "react";
export const SupabaseContext = React.createContext<SupabaseClient>(  null as unknown as SupabaseClient);
export const SupabaseProvider: React.FC<{ supabase: SupabaseClient }> = ({  children,  supabase,}) => (  <SupabaseContext.Provider value={supabase}>    {children}  </SupabaseContext.Provider>);
export const useSupabase = () => React.useContext(SupabaseContext);

Pass Supabase environment variables to our client

app/root.tsxCopy
123456export const loader = () => {  return {    supabaseKey: process.env.SUPABASE_ANON_KEY,    supabaseUrl: process.env.SUPABASE_URL,  };};

Create a Supabase instance and pass it into the root level Supabase provider

app/root.tsxCopy
1234567891011121314151617181920import { createClient } from "@supabase/supabase-js";import { SupabaseProvider } from "./utils/supabase-client";
// export const loader...
export default function App() {  const loader = useLoaderData();
  const supabase = createClient(loader.supabaseUrl, loader.supabaseKey);
  return (    <Document>      <SupabaseProvider supabase={supabase}>        <Layout>          <Outlet />        </Layout>      </SupabaseProvider>    </Document>  );}

Create the /auth route

Since I'm too lazy to implement a login page, I'll just use the UI provided by Supabase.

Install @supabase/ui

shCopy
npm install @supabase/ui
yarn add @supabase/ui

Create the main auth component

You can create your custom sign-up and sign-in form if you want.

app/routes/auth.tsxCopy
123456789101112131415import React from "react";import { Auth } from "@supabase/ui";import { useSupabase } from "~/utils/supabase-client";
export default function AuthBasic() {  const supabase = useSupabase();
  return (    <Auth.UserContextProvider supabaseClient={supabase}>      <Container> {/* TODO */}        <Auth supabaseClient={supabase} />      </Container>    </Auth.UserContextProvider>  );}

Create the component to inform the server that we have a Supabase session

app/routes/auth.tsxCopy
1234567891011121314151617181920212223242526import React, { useEffect } from "react";import { useSubmit } from "remix";
const Container: React.FC = ({ children }) => {  const { user, session } = Auth.useUser();  const submit = useSubmit();
  useEffect(() => {    if (user) {      const formData = new FormData();
      const accessToken = session?.access_token;
      // you can choose whatever conditions you want      // as long as it checks if the user is signed in      if (accessToken) {        formData.append("access_token", accessToken);        submit(formData, { method: "post", action: "/auth" });      }    }  }, [user]);
  return <>{children}</>;};
// ...

Create an action handler to process the Supabase token

app/routes/auth.tsxCopy
12345678910111213141516171819202122import { Auth } from "@supabase/ui";import { useSubmit, redirect } from "remix";import type { ActionFunction } from "remix";import React from "react";import { useSupabase } from "~/utils/supabase-client";import { commitSession, getSession } from "~/utils/supabase.server";
export const action: ActionFunction = async ({ request }) => {  const formData = await request.formData();
  const session = await getSession(request.headers.get("Cookie"));
  session.set("access_token", formData.get("access_token"));
  return redirect("/words", {    headers: {      "Set-Cookie": await commitSession(session),    },  });};
// ...

After logging in, the user will be redirected to the /words route.

If you want to test without signing up, use the following credentials:

email: dev.codegino@gmail.com

password: testing

Signing out

Create a logout button in the header

app/root.tsxCopy
123456789101112131415161718192021222324252627import { {/*...*/}, useSubmit } from "remix";import { {/*...*/}, useSupabase } from "./utils/supabase-client";import { Button } from "./components/basic/button";
function Layout({ children }: React.PropsWithChildren<{}>) {  const submit = useSubmit();  const supabase = useSupabase();
  const handleSignOut = () => {    supabase.auth.signOut().then(() => {      submit(null, { method: "post", action: "/signout" });    });  };
  return (    <main>      <header>        {supabase.auth.session() && (          <Button type="button" onClick={handleSignOut}>            Sign out          </Button>        )}      </header>      {children}    </main>  );}

Create an action handler

I don't want to pollute my other route, so I will create my signout action handler separately

app/routes/signout.tsxCopy
123456789101112131415161718import { destroySession, getSession } from "../utils/supabase.server";import { redirect } from "remix";import type { ActionFunction } from "remix";
export const action: ActionFunction = async ({ request }) => {  let session = await getSession(request.headers.get("Cookie"));
  return redirect("/auth", {    headers: {      "Set-Cookie": await destroySession(session),    },  });};
export const loader = () => {  // Redirect to `/` if user tried to access `/signout`  return redirect("/");};

TL;DR version of using our setup

Using in a loader or action

.tsxCopy
123456789export const action = async ({ request, params }) => {  // Just set the token to any part you want to have access to.  // I haven't tried making a global handler for this,  // but I prefer to be explicit about setting this.  await setAuthToken(request);
  await supabase.from("words").update(/*...*/);  // ...};

Conditional rendering based on auth state

.tsxCopy
1234567export default function Index() {  const supabase = useSupabase();
  return supabase.auth.user()    ? <div>Hello world</div>    : <div>Please sign in</div>;}

NOTE: Conditional server-side rendering might cause hydration warning,

I'll fix this in another blog post.

Using in CRUD Operations

The examples below are a longer version of using our setup for CRUD operations.

Fetching All operation

app/routes/words.tsxCopy
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364import { Form, useTransition } from "remix";import type { LoaderFunction } from "remix";import { useLoaderData, Link, Outlet } from "remix";import { Button } from "~/components/basic/button";import { supabase } from "~/utils/supabase.server";import type { Word } from "~/models/word";import { useSupabase } from "~/utils/supabase-client";
export const loader: LoaderFunction = async () => {  // No need to add auth here, because GET /words is public  const { data: words } = await supabase    .from<Word>("words")    .select("id,name,type");
  // We can pick and choose what we want to display  // This can solve the issue of over-fetching or under-fetching  return words;};
export default function Index() {  const words = useLoaderData<Word[]>();  const transition = useTransition();  const supabase = useSupabase();
  return (    <main className="p-2">      <h1 className="text-3xl text-center mb-3">English words I learned</h1>      <div className="text-center mb-2">Route State: {transition.state}</div>      <div className="grid grid-cols-1 md:grid-cols-2 ">        <div className="flex flex-col items-center">          <h2 className="text-2xl pb-2">Words</h2>          <ul>            {words.map((word) => (              <li key={word.id}>                <Link to={`/words/${word.id}`}>                  {word.name} | {word.type}                </Link>              </li>            ))}          </ul>          {/* Adding conditional rendering might cause a warning,          We'll deal with it later */}          {supabase.auth.user() ? (            <Form method="get" action={"/words/add"} className="pt-2">              <Button                type="submit"                className="hover:bg-primary-100 dark:hover:bg-primary-900"              >                Add new word              </Button>            </Form>          ) : (            <Form method="get" action={`/auth`} className="flex">              <Button type="submit" color="primary" className="w-full">                Sign-in to make changes              </Button>            </Form>          )}        </div>        <Outlet />      </div>    </main>  );}

Retrieve one and Delete one operation

app/routes/words/$id.tsxCopy
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677import { Form, useLoaderData, redirect, useTransition } from "remix";import type { LoaderFunction, ActionFunction } from "remix";import type { Word } from "~/models/word";import { Input } from "~/components/basic/input";import { Button } from "~/components/basic/button";import { setAuthToken, supabase } from "~/utils/supabase.server";import { useSupabase } from "~/utils/supabase-client";
// Here's how to delete one entryexport const action: ActionFunction = async ({ request, params }) => {  const formData = await request.formData();
  // Auth Related Code  await setAuthToken(request);
  if (formData.get("_method") === "delete") {    await supabase      .from<Word>("words")      .delete()      .eq("id", params.id as string);
    return redirect("/words");  }};
// Here's the how to fetch one entryexport const loader: LoaderFunction = async ({ params }) => {  // No need to add auth here, because GET /words is public  const { data } = await supabase    .from<Word>("words")    .select("*")    .eq("id", params.id as string)    .single();
  return data;};
export default function Word() {  const word = useLoaderData<Word>();  const supabase = useSupabase();  let transition = useTransition();
  return (    <div>      <h3>        {word.name} | {word.type}      </h3>      <div>Form State: {transition.state}</div>      {word.definitions.map((definition, i) => (        <p key={i}>          <i>{definition}</i>        </p>      ))}      {word.sentences.map((sentence, i) => (        <p key={i}>{sentence}</p>      ))}
      {/* Adding conditional rendering might cause a warning,      We'll deal with it later */}      {supabase.auth.user() && (        <>          <Form method="post">            <Input type="hidden" name="_method" value="delete" />            <Button type="submit" className="w-full">              Delete            </Button>          </Form>          <Form method="get" action={`/words/edit/${word.id}`} className="flex">            <Button type="submit" color="primary" className="w-full">              Edit            </Button>          </Form>        </>      )}    </div>  );}

Create operation

app/routes/words/add.tsxCopy
12345678910111213141516171819202122232425262728293031323334import { redirect } from "remix";import type { ActionFunction } from "remix";import { setAuthToken, supabase } from "~/utils/supabase.server";import { WordForm } from "~/components/word-form";
export const action: ActionFunction = async ({ request }) => {  const formData = await request.formData();
  // Auth Related Code  const session = await setAuthToken(request);
  const newWord = {    name: formData.get("name"),    type: formData.get("type"),    sentences: formData.getAll("sentence"),    definitions: formData.getAll("definition"),    user_id: session.get("uuid"),  };
  const { data, error } = await supabase    .from("words")    .insert([newWord])    .single();
  if (error) {    return redirect(`/words`);  }
  return redirect(`/words/${data?.id}`);};
export default function AddWord() {  return <WordForm />;}

Update operation

app/routes/words/edit/$id.tsxCopy
123456789101112131415161718192021222324252627282930313233343536373839import { useLoaderData, redirect } from "remix";import type { LoaderFunction, ActionFunction } from "remix";import { WordForm } from "~/components/word-form";import type { Word } from "~/models/word";import { setAuthToken, supabase } from "~/utils/supabase.server";
export const action: ActionFunction = async ({ request, params }) => {  const formData = await request.formData();  const id = params.id as string;
  const updates = {    type: formData.get("type"),    sentences: formData.getAll("sentence"),    definitions: formData.getAll("definition"),  };
  // Auth Related Code  await setAuthToken(request);
  await supabase.from("words").update(updates).eq("id", id);
  return redirect(`/words/${id}`);};
export const loader: LoaderFunction = async ({ params }) => {  const { data } = await supabase    .from<Word>("words")    .select("*")    .eq("id", params.id as string)    .single();
  return data;};
export default function EditWord() {  const data = useLoaderData<Word>();
  return <WordForm word={data} />;}

Conclusion

We can still use Supabase only on the client-side as we use it on a typical React application. However, putting the data fetching on the server-side will allow us to benefit from a typical SSR application.