Microsoft Strategy

The Microsoft strategy is used to authenticate users against an account on Microsoft Active Directory (opens in a new tab) using Remix-Auth (opens in a new tab). This can be a work/school account or a personal Microsoft account, like Skype, Xbox and Outlook.com. It extends the OAuth2Strategy.

Supported runtimes

Runtime	Has Support
Node.js	✅
Cloudflare	✅

Setup Guide

Create an OAuth application

Follow the steps on the Microsoft documentation (opens in a new tab) to create a new App Registration. You should select Web as the platform, configure a Redirect URI and add a client secret.

If you want to support login with both personal Microsoft accounts and school/work accounts, you might need to configure the supported account types by editing the manifest file. Set signInAudience value to MicrosoftADandPersonalMicrosoftAccount to allow login also with personal accounts.

Change your redirect URI to https://example.com/auth/microsoft/callback or http://localhost:4200/auth/microsoft/callback if you run it locally.

Be sure to copy the client secret, redirect URI, Tenant ID and the Application (client) ID (under Overview) because you will need them later.

Install the package

npm install remix-auth-microsoft remix-auth-oauth2

Create the strategy instance

app/services/auth.server.ts

import { Authenticator } from "remix-auth";
import { Auth0Strategy } from "remix-auth-auth0";
 
// Create an instance of the authenticator, pass a generic with what your
// strategies will return and will be stored in the session
export const authenticator = new Authenticator<User>(sessionStorage);
 
let auth0Strategy = new Auth0Strategy(
  {
    callbackURL: "https://example.com/auth/auth0/callback",
    clientID: "YOUR_AUTH0_CLIENT_ID",
    clientSecret: "YOUR_AUTH0_CLIENT_SECRET",
    domain: "YOUR_TENANT.us.auth0.com",
  },
  async ({ accessToken, refreshToken, extraParams, profile }) => {
    // Get the user data from your DB or API using the tokens and profile
    return User.findOrCreate({ email: profile.emails[0].value });
  }
);
 
authenticator.use(auth0Strategy);

See Microsoft docs (opens in a new tab) for more information on scope and prompt parameters.

Applications with single-tenant authentication (no multitenant allowed)

If you want to allow login only for users from a single organization, you should add the tenantId attribute to the configuration passed to MicrosoftStrategy. The value of tenantId should be the Directory (tenant) ID found under Overview in your App Registration page.

You must also select Accounts in this organizational directory as Supported account types in your App Registration.

Setup your routes

app/routes/login.tsx

export default function Login() {
  return (
    <form action="/auth/microsoft" method="post">
      <button>Login with Microsoft</button>
    </form>
  );
}

app/routes/auth/microsoft.tsx

import type { ActionArgs } from "@remix-run/node";
import { authenticator } from "~/auth.server";
import { redirect } from "@remix-run/node";
 
export const loader = () => redirect("/login");
 
export const action = ({ request }: ActionArgs) => {
  return authenticator.authenticate("microsoft", request);
};

app/routes/auth/microsoft/callback.tsx

import type { LoaderArgs } from "@remix-run/node";
import { authenticator } from "~/auth.server";
 
export const loader = ({ request }: LoaderArgs) => {
  return authenticator.authenticate("microsoft", request, {
    successRedirect: "/dashboard",
    failureRedirect: "/login",
  });
};

Auth0 Strategy Steam Strategy