remix-auth v4 / remix-auth-oauth2 v3

[wKovacs64]

Hi @juhanakristian,

Thanks so much for this strategy! 🙏

Have you looked into updating it for remix-auth v4 and remix-auth-oauth2 v3, by chance?

[sbaleno]

I'm not sure how to best create a PR - or if we should start a new repo - but here's what I am using now -

import { OAuth2Strategy } from "remix-auth-oauth2";

export type MicrosoftScope = "openid" | "email" | "profile" | "offline_access";

export interface MicrosoftStrategyOptions {
  clientId: string;
  clientSecret: string;
  redirectURI: string;
  scopes: MicrosoftScope[];
  tenantId?: string;
  prompt?: string;
}

export interface MicrosoftProfile {
  id: string;
  displayName: string;
  name: {
    familyName: string;
    givenName: string;
  };
  emails: [{ value: string }];
  _json: {
    sub: string;
    name: string;
    family_name: string;
    given_name: string;
    email: string;
  };
}

const userInfoURL = "https://graph.microsoft.com/oidc/userinfo";


export interface MicrosoftExtraParams extends Record<string, string | number> {
  expires_in: 3599;
  token_type: "Bearer";
  scope: string;
  id_token: string;
}

export const MicrosoftStrategyDefaultScopes: MicrosoftScope[] = [
  "openid",
  "profile",
  "email",
];
export const MicrosoftStrategyDefaultName = "microsoft";
export const MicrosoftStrategyScopeSeperator = " ";


export class MicrosoftStrategy<User> extends OAuth2Strategy<User> {
  public name = MicrosoftStrategyDefaultName;

  private readonly prompt?: string;
  private readonly tenantId: string;
  private scopes: MicrosoftScope[];
  constructor(
    {
      clientId,
      clientSecret,
      redirectURI,
      scopes,
      prompt,
      tenantId = "common",
    }: MicrosoftStrategyOptions,
    verify: OAuth2Strategy<User>["verify"]
  ) {
    super(
      {
        clientId,
        clientSecret,
        redirectURI,
        authorizationEndpoint: `https://login.microsoftonline.com/${tenantId}/oauth2/v2.0/authorize`,
        tokenEndpoint: `https://login.microsoftonline.com/${tenantId}/oauth2/v2.0/token`,
        scopes: scopes ?? MicrosoftStrategyDefaultScopes,
      },
      verify
    );

    this.scopes = scopes;
    this.prompt = prompt;
    this.tenantId = tenantId;
  }

  protected authorizationParams(
    params: URLSearchParams,
  ): URLSearchParams {
    params.set('scope', this.scopes.join(MicrosoftStrategyScopeSeperator));
    if (this.prompt) {
      params.set('prompt', this.prompt);
    }

    return params
  }

  static async userProfile(accessToken: string): Promise<MicrosoftProfile> {
    const response = await fetch(userInfoURL, {
      headers: {
        Authorization: `Bearer ${accessToken}`,
      },
    });
    const data: MicrosoftProfile["_json"] = await response.json();

    const profile: MicrosoftProfile = {
      displayName: data.name,
      id: data.sub,
      name: {
        familyName: data.family_name,
        givenName: data.given_name,
      },
      emails: [{ value: data.email }],
      _json: data,
    };

    return profile;
  }
}

[juhanakristian]

Thanks for raising this issue @wKovacs64 I do want to upgrade this library but haven't had time to look into it.

@sbaleno PRs are always welcome. Thanks also for posting your solution!