Microsoft auth provider

Compatibility

This starter is compatible with versions >= 2.8.3 of @medusajs/medusa.

Getting Started

Installation

1. Run yarn add @thepuzzlers/medusa-plugin-microsoft-auth-provider
2. Add microsoft configuration to the .env file

TENANT_ID = "xxxx"
CLIENT_ID = "xxxx"
CLIENT_SECRET = "xxxx"
HOST_URL = "example.medusa.com"

NOTE: the HOST_URL is your medusa url. it's used to create the callback api that back to your medusa application if no callback is provided by the application when requesting the token.

2. Add the plugin to the providers array of Auth Module in medusa-config.ts

 modules: [
    {
      resolve: "./src/modules/salesRep",
    },
    {
      resolve: "@medusajs/medusa/auth",
      dependencies: [Modules.CACHE, ContainerRegistrationKeys.LOGGER],
      options: {
        providers: [
          // default provider
          {
            resolve: "@medusajs/medusa/auth-emailpass",
            id: "emailpass",
          },
          {
            resolve:
              "@thepuzzlers/medusa-plugin-microsoft-auth-provider/providers/microsoft-sso",
            id: "microsoft-sso",
            options: {
              tenantId: process.env.TENANT_ID,
              clientId: process.env.CLIENT_ID,
              clientSecret: process.env.CLIENT_SECRET,
              hostUrl: `https://${process.env.HOST_URL}`,
            },
          },
        ],
      },
    },
  ],

Usage

In mobile app: eg Expo app

import { Button } from "react-native-paper";
import { makeRedirectUri } from "expo-auth-session";
import * as WebBrowser from "expo-web-browser";
import { sdk } from "@/medusa/config";
import * as Crypto from "expo-crypto";

import { getUserDetailFromToken } from "./utils/getUserDetailFromToken";
import { useRouter } from "expo-router";

WebBrowser.maybeCompleteAuthSession();
const redirectTo = makeRedirectUri({
  path: "index",
  preferLocalhost: true,
});

const getParams = (url: string) => {
  const sourceUrl = new URL(url);
  const searchParams = new URLSearchParams(sourceUrl.search);
  return Object.fromEntries(searchParams.entries());
};

function URLEncode(str: string) {
  return str.replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
}

async function sha256(buffer: string) {
  return await Crypto.digestStringAsync(
    Crypto.CryptoDigestAlgorithm.SHA256,
    buffer,
    {
      encoding: Crypto.CryptoEncoding.BASE64,
    }
  );
}

const performOAuth = async () => {
  let codeVerifier = `43aplhanumericRandomgCharacter`; // This is random alphanumeric character generated differently on every request but it needs to be 43 characters long
  let codeChallenge = URLEncode(await sha256(codeVerifier));

  // Get the auth location
  const result = await sdk.auth.login("sales-rep", "microsoft-sso", {
    callbackUrl: redirectTo,
    codeChallenge,
  });

  if (typeof result === "object" && result.location) {
    // Opening the pop up
    const authRes = await WebBrowser.openAuthSessionAsync(
      result.location,
      redirectTo
    );

    // exchange code and state for auth token
    if (authRes.type === "success") {
      const queryParams = getParams(authRes.url);
      let token = "";
      try {
        token = await sdk.auth.callback("sales-rep", "microsoft-sso", {
          ...queryParams,
          codeVerifier,
        });
      } catch (error) {
        console.log("Error getting token from medusa server", error);
      }

      if (token) {
        //  DO whatever with the token, eg: getting the user details
      }
    }
  }
};

export const MicrosoftLoginButton = () => {
  const router = useRouter();

  return <Button onPress={performOAuth}>Microsoft Login Button</Button>;
};

Events

1. microsoft_sso.user_authorized : emitted when an user successfully sign in to the app

Sources:

• Medusa Plugins documentation
• Create Auth Provider Plugin
• Medusa installation
• Medusa auth google provider plugin
• Microsoft OIDC
• Request an authorization code
• PKCE auth flow with rfc
• Medusa Third party service auth flow
• Medusa Third party social login storefront
• The Medusa auth plugin, using the deprecated version of passport-azure-ad
• Microsoft id_token properties
• Example of decoded id_token after the access_token redemption
• Custom auth strategy
• React Native Authorization Code Grant Flow
• adding changeset