Skip to main content
Version: 4.xx.xx

Azure Active Directory B2C (AAD B2C)

Azure Active Directory B2C provides business-to-customer identity as a service. Your customers use their preferred social, enterprise, or local account identities to get single sign-on access to your applications and APIs.

The Microsoft Authentication Library (MSAL) enables developers to acquire security tokens from the Microsoft identity platform to authenticate users and access secured web APIs. It can be used to provide secure access to Microsoft Graph, other Microsoft APIs, third-party web APIs, or your own web API. MSAL supports many different application architectures and platforms including .NET, JavaScript, Java, Python, Android, and iOS.

tip

We use Azure AD B2C in our example but authentication with Azure AD should be very similar.

Installation​

We will be using the javascript version of msal library and a helper for react. You can find more about the msal library here: docs

To install the required dependencies, run the following command:

npm install @azure/msal-browser @azure/msal-react

Detailed documentation for using msal with react can be found here: docs

Configure the MsalProvider component​

We've create config file in src/config.ts folder. This file contains the configuration for the msal library. You can find more information about the configuration options here: docs

src/config.ts
import { Configuration, LogLevel } from "@azure/msal-browser";

export const msalConfig: Configuration = {
auth: {
clientId: "YOUR_CLIENT_ID", //`${process.env.REACT_APP_AZURE_AAD_CLIENT_ID}`,
authority: "YOUR_AUTHORITY", //`https://${process.env.REACT_APP_AZURE_AAD_TENANT_NAME}.b2clogin.com/${process.env.REACT_APP_AZURE_AAD_TENANT_NAME}.onmicrosoft.com/${process.env.REACT_APP_AZURE_AAD_POLICY_NAME}`,
knownAuthorities: ["YOUR_KNOWN_AUTHORITIES"], //[`${process.env.REACT_APP_AZURE_AAD_TENANT_NAME}.b2clogin.com`],
redirectUri: "http://localhost:3000/", // Replace appropriately
postLogoutRedirectUri: window.location.origin,
},
cache: {
cacheLocation: "sessionStorage", // This configures where your cache will be stored
storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
},
};

// Add scopes here for ID token to be used at Microsoft identity platform endpoints.
export const loginRequest = {
scopes: ["User.Read"]
};

export const tokenRequest = {
scopes: [...] // Replace ... with your custom scopes
};


// Add the endpoints here for Microsoft Graph API services you'd like to use.
export const graphConfig = {
graphMeEndpoint: "ENTER_THE_GRAPH_ENDPOINT_HERE/v1.0/me"
};
note

We recommend to use environment variables for the configuration parameters.

Wrap your root component with an MsalProvider that you can import from the SDK.

src/index.tsx
import React from "react";
import ReactDOM from "react-dom/client";

import {
EventType,
PublicClientApplication,
AccountInfo,
EventPayload,
SilentRequest,
} from "@azure/msal-browser";
import { MsalProvider } from "@azure/msal-react";

import App, { TOKEN_KEY } from "./App";
import { msalConfig, tokenRequest } from "./config";

const msalInstance = new PublicClientApplication(msalConfig);

msalInstance.addEventCallback(async (event) => {
if (event.eventType === EventType.LOGIN_SUCCESS) {
const payload: EventPayload = event.payload;
msalInstance.setActiveAccount(payload as AccountInfo);

let account = msalInstance.getActiveAccount();

const request: SilentRequest = {
...tokenRequest,
account: account!,
};
try {
// Silently acquires an access token which is then attached to a request for API access
const response = await msalInstance.acquireTokenSilent(request);
console.log("Fetching access token: success");
console.log("Scopes", response.scopes);
console.log("Token Type", response.tokenType);

localStorage.setItem(TOKEN_KEY, response.accessToken);
} catch (e) {
msalInstance.acquireTokenPopup(request).then((response) => {
localStorage.setItem(TOKEN_KEY, response.accessToken);
});
}
}
});

const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement,
);
root.render(
<React.StrictMode>
<MsalProvider instance={msalInstance}>
<App />
</MsalProvider>
</React.StrictMode>,
);

Override /login page​

First, we need to override the refine login page. In this way, we will redirect it to the Azure AD login page. We create a login.tsx file in the /src folder.

src/login.tsx
import React from "react";
import { useLogin } from "@refinedev/core";
import { Layout, Button } from "antd";

const LoginPage = () => {
const SignInButton = () => {
const { mutate: login } = useLogin();

return (
<Button type="primary" size="large" block onClick={() => login()}>
Sign in
</Button>
);
};

return (
<Layout
style={{
background: `radial-gradient(50% 50% at 50% 50%, #63386A 0%, #310438 100%)`,
backgroundSize: "cover",
}}
>
<div style={{ height: "100vh", display: "flex" }}>
<div style={{ maxWidth: "200px", margin: "auto" }}>
<div style={{ marginBottom: "28px" }}>
<img src="./refine.svg" alt="Refine" />
</div>
<SignInButton />
</div>
</div>
</Layout>
);
};

export default LoginPage;

Auth Provider​

In refine, authentication and authorization processes are performed with the auth provider. Let's write a provider for Azure AD.

src/App.tsx
import { Refine, AuthBindings, Authenticated } from "@refinedev/core";
import { Layout, ErrorComponent } from "@refinedev/antd";
import routerProvider, {
NavigateToResource,
CatchAllNavigate,
} from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";
import { useIsAuthenticated, useMsal } from "@azure/msal-react";
import { AccountInfo, SilentRequest } from "@azure/msal-browser";
import axios, { AxiosRequestConfig } from "axios";

import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";

import LoginPage from "./login";
import { tokenRequest } from "./config";

export const TOKEN_KEY = "refine-auth";

export const axiosInstance = axios.create();

axiosInstance.interceptors.request.use(
// Here we can perform any function we'd like on the request
(request: AxiosRequestConfig) => {
// Retrieve the token from local storage
const token = localStorage.getItem(TOKEN_KEY);

// Check if the header property exists
if (request.headers) {
// Set the Authorization header if it exists
request.headers["Authorization"] = `Bearer ${token}`;
} else {
// Create the headers property if it does not exist
request.headers = {
Authorization: `Bearer ${token}`,
};
}
return request;
},
);

const App: React.FC = () => {
const API_URL = "https://api.fake-rest.refine.dev";

const isAuthenticated = useIsAuthenticated();
const { instance, inProgress, accounts } = useMsal();

if (inProgress === "login" || inProgress === "handleRedirect") {
return <div>Loading...</div>;
}

const account: AccountInfo = accounts[0];

const request: SilentRequest = {
...tokenRequest,
account,
};

const authProvider: AuthBindings = {
login: async () => {
instance.loginRedirect(); // Pick the strategy you prefer i.e. redirect or popup
return {
success: true,
};
},
register: async () => ({
success: true,
}),
resetPassword: async () => ({
success: true,
}),
updatePassword: async () => ({
success: true,
}),
logout: async () => ({
success: true,
}),
check: async () => {
try {
if (account) {
const token = await instance.acquireTokenSilent(request);
localStorage.setItem(TOKEN_KEY, token.accessToken);
return {
authenticated: true,
};
} else {
return {
authenticated: false,
redirectTo: "/login",
};
}
} catch (e) {
return {
authenticated: false,
redirectTo: "/login",
};
}
},
onError: async (error) => {
console.error(error);
return { error };
},
getPermissions: async () => null,
getIdentity: async (): Promise<AccountInfo> => {
if (account === null || account === undefined) {
return null;
}
return account;
},
};

return (
<BrowserRouter>
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider(API_URL, axiosInstance)}
authProvider={authProvider}
resources={[
{
name: "posts",
list: "/posts",
},
]}
>
<Routes>
<Route
element={
<Authenticated
fallback={<CatchAllNavigate to="/login" />}
>
<Layout>
<Outlet />
</Layout>
</Authenticated>
}
>
<Route
path="/posts"
element={<div>dummy list page</div>}
/>
</Route>
<Route
element={
<Authenticated fallback={<Outlet />}>
<NavigateToResource />
</Authenticated>
}
>
<Route path="/login" element={<LoginPage />} />
</Route>
<Route path="*" element={<ErrorComponent />} />
</Routes>
</Refine>
</BrowserRouter>
);
};

export default App;