The Microsoft strategy is used to authenticate users against an account on Microsoft Active Directory using Remix-Auth.
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 | ✅ |
How to use
Create an OAuth application
Follow the steps on the Microsoft documentation 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 dependencies
npm install remix-auth-microsoft remix-auth remix-auth-oauth2
Create the strategy instance
import { MicrosoftStrategy } from "remix-auth-microsoft";
import { Authenticator } from "remix-auth";
import { sessionStorage } from "~/services/session.server";
export let authenticator = new Authenticator<User>(sessionStorage);
let microsoftStrategy = new MicrosoftStrategy(
{
clientId: "YOUR_CLIENT_ID",
clientSecret: "YOUR_CLIENT_SECRET",
redirectUri: "https://example.com/auth/microsoft/callback",
tenantId: "YOUR_TENANT_ID",
scope: "openid profile email",
prompt: "login",
},
async ({ accessToken, extraParams, profile }) => {
return User.findOrCreate({ email: profile.emails[0].value });
}
);
authenticator.use(microsoftStrategy);
See Microsoft docs 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
export default function Login() {
return (
<form action="/auth/microsoft" method="post">
<button>Login with Microsoft</button>
</form>
);
}
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);
};
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",
});
};
Add Session Storage
import { createCookieSessionStorage } from "@remix-run/node";
export let sessionStorage = createCookieSessionStorage({
cookie: {
name: "_session",
sameSite: "lax",
path: "/",
httpOnly: true,
secrets: ["s3cr3t"],
secure: process.env.NODE_ENV === "production",
},
});
export let { getSession, commitSession, destroySession } = sessionStorage;