Using two or more auth strategies in a remix app

[thinkRoman]

I'm super new to this OAuth system, probably a noob amongst you guys. I wanted to use email-password and google strategy with remix-auth. Can I use them together? If I can? Can someone guide me through the using them together. 😅

Any help is appreciated !

[sergiodxa]

You can use any number of strategies, what you need to do is to call authenticator.use multiple times, one per strategy.

export let authenticator = new Authenticator<User>(sessionStorage, options)
authenticator
  .use(new FormStrategy(login))
  .use(new GoogleStrategy(googleOptions, login))

You could also do authenticator.use two times instead of chaining them.

Then, when you want to use one strategy you need to do authenticator.authenticate("form", request) or authenticator.authenticate("google", request), that's the reason why authenticate excepts the strategy name.

If you want to customize the strategy name pass it as second param of .use like this:

authenticator.use(new FormStrategy(login), "user-pass")
authenticator.authenticate("user-pass", request) // this will use the FormStrategy

One important thing, is that the function you pass to each strategy must be always return the same object, the one you pass as type to Authenticator when creating a new instance.

[binajmen]

Does that mean isAuthenticated() will pick the right strategy based on the strategy defined in the cookie?

[sergiodxa]

isAuthenticated checks for the user data on the session, it doesn’t do anything related to the strategy.

[binajmen]

Oh ok, because any strategy will (must) always return the same user object, regardless of the strategy

[jacargentina]

Having migrated to v4 already. Following this thread, I already have FormStrategy (session cookie)

Now I want to have JWT as an alternative for authentication. My doubt is about the best to implement it.

This code shows my idea.

authenticator.use(
  new FormStrategy(async ({ form }) => {
 ...
  }
  'form',
);
authenticator.use(
  new JwtStrategy(
   ...
  ),
  'jwt',
);

So, should I do this for authenticating from now on?

export let action: ActionFunction = async ({ request }) => {
  var user = null;
  try {
    user  = await authenticator.authenticate('form', request);
    if (!user) {
        user  = await authenticator.authenticate('jwt', request);   
    } 
  } catch (err: any) {
   // Not authenticated
  }
  if (user) {
    // Authenticated...
  } else {
   // Not authenticated
  }
};

@sergiodxa what do u think? Thanks a lot!

[sergiodxa]

I would probably extract that to a function, but yes, that's what you need if you want to use a fallback strategy on the same action.

Although I recommend you to don't re-use the action for an API and web, re-use the logic but create separate actions for your API and web routes.

E.g. if you have an action to create a post, instead of creating a single routes/posts.tsx route and use it as a web route and api routes, create a separate routes/api.posts.ts and put an action there that uses JWT for authentication, and then in routes/posts.tsx you will only use the form one.