How to implement multiple SupabaseStratagies?

[arpitdalal]

Hello @mitchelvanbever @cliffordfajardo @rphlmr
I am trying to implement social-auth and local (email/pass) strategies but how do I checkSession on both together? as checkSession is only available on an instance of the strategy and not on the Authenticator instance itself.
Here's my auth.server.ts:

import { createCookieSessionStorage } from "remix";
import { Authenticator, AuthorizationError } from "remix-auth";
import { SupabaseStrategy } from "remix-auth-supabase";

import { supabaseAdmin } from "~/services/supabase.server";

import { loginValidator } from "~/utils/yup";

import type { Session } from "@supabase/supabase-js";

export const sessionStorage = createCookieSessionStorage({
  cookie: {
    name: "sb",
    expires: new Date(Date.now() + 3600),
    httpOnly: true,
    maxAge: 60 * 60 * 24 * 30,
    path: "/",
    sameSite: "lax",
    secrets: [process.env.SESSION_SECRET],
    secure: process.env.NODE_ENV === "production"
  }
});

export const sbSocialStrategy = new SupabaseStrategy(
  {
    supabaseClient: supabaseAdmin,
    sessionStorage,
    sessionKey: "sb:session",
    sessionErrorKey: "sb:error"
  },
  async ({ req }) => {
    const form = await req.formData();
    const session = form?.get("session");

    if (typeof session !== "string")
      throw new AuthorizationError("session not found");

    return JSON.parse(session);
  }
);

export const sbLocalStrategy = new SupabaseStrategy(
  {
    supabaseClient: supabaseAdmin,
    sessionStorage,
    sessionKey: "sb:session",
    sessionErrorKey: "sb:error"
  },
  async ({ req, supabaseClient: supabase }) => {
    const form = await req.formData();
    const fieldValues = await loginValidator.validate(form);
    const redirectTo = form.get("redirectTo") || "/app";
    if (fieldValues.error || typeof redirectTo !== "string") {
      throw new AuthorizationError("Form not submitted correctly.");
    }

    const { email, password } = fieldValues.data;

    return supabase.auth.api
      .signInWithEmail(email, password)
      .then(({ data, error }): Session => {
        if (error || !data) {
          throw new AuthorizationError(
            error?.message ?? "No user session found"
          );
        }

        return data;
      });
  }
);

export const authenticator = new Authenticator<Session>(sessionStorage, {
  sessionKey: sbSocialStrategy.sessionKey,
  sessionErrorKey: sbSocialStrategy.sessionErrorKey
});

authenticator.use(sbSocialStrategy, "sb-social");
authenticator.use(sbLocalStrategy, "sb-local");

But on my protected route, I cannot use authenticator.checkSession as that doesn't exist, using anyone strategy from both for checkSession would do the job?

[rphlmr]

Hello @arpitdalal
You can use the checkSession of your choice.
In fine it results to the same supabase auth token 👍
That's what I did for a project 😉

[rphlmr]

I think you should not replace # by ?, it's part of oauth security 😅 (supabase/supabase#1698 (comment))

Someone asked about verified email : #9
Maybe you can be inspired by example we provide for oauth strategy (handle supabase callback

remix-auth-supabase/examples/oauth/app/routes/oauth.callback.tsx

Line 17 in c5d78fb

useEffect(() => {

)

[rphlmr]

And sorry forget to answer question 1.
Yes registration is on your hands ;)

For oauth (social auth, magic link) it's handle "client side" (not by a loader / action).
For email / password it's just a form pointing to an action 😉.
We doesn't provide example because we think it's out of scope of our lib but if you are stuck, let me know, I could share some code.

[arpitdalal]

I think you should not replace # by ?, it's part of oauth security 😅 (supabase/supabase#1698 (comment))

Someone asked about verified email : #9
Maybe you can be inspired by example we provide for oauth strategy (handle supabase callback

remix-auth-supabase/examples/oauth/app/routes/oauth.callback.tsx

Line 17 in c5d78fb

useEffect(() => {

)

Oh, I am not talking about oAuth, I am talking about when the new registered user clicks on the "confirm my email" link and gets redirected to a page with #, access_token, refresh_token and other things as well. I have to replace that # with ? so my server can get that access and refresh token and sign the user in. I hope that made sense.

[rphlmr]

I spoke about oAuth because it's the same process for email confirmation.
When user clicks on the link, he gets back a "token" protected by "fragment url" (url with #) ;)

I advise to use supabase client side with onAuthStateChange (like the example) because this method have all necessary to parse the url and get back a token sendable to an action.
(warning, a supabase client with limited power, cf example)

When a url have a "#", browser doesn't forward it to backend. It's a protection to not leak your access token to a "man in the middle" like proxies you can find at work. When you transform the url to replace # by ? you create a security issue for your user, even with TLS, the query parameter will be visible in your proxy logs.
Maybe it's not a critical problem in that case but beware, there is reason why # is used 😜

I don't know if Supabase fixed their bug with verify email callback link. Last time I try, the link was not customizable :'( (redirect to "/")

But the idea is a "confirm my email" link pointing to a "my-server.com/confirm-email" like https://github.com/mitchelvanbever/remix-auth-supabase/blob/c5d78fbde3cc0b21b916e125c47ccc16ca4b486c/examples/oauth/app/routes/oauth.callback.tsx
UseEffect runs and supabase client sdk get you back a token, send it to an action, done :)

[arpitdalal]

Oh! I didn't know supabase client could do that, I know using #s is secure and all, but had to get around that someway, but if supabase client can do that, I'll let it handle it for me. Thanks very much for the explanation dude, appreciate it a lot!!