Full-Stack MSAL (Client + Server) – Discussion & Working Example

[DaliborHomola]

Hey everyone! 👋
I’d like to open a discussion around full-stack MSAL usage (client + server) in TanStack Start.
I couldn't find any complete public example—so here’s my working setup to help others and hopefully spark better ideas.

In my example, I've got:
✅ MSAL on the client (interactive login, Graph calls)
✅ MSAL on the server (server-side validation, protected server functions)
✅ Group-based authorization via Azure AD Groups

This is a long-ish post, but useful for anyone building a full-stack MSAL setup.

Install packages: npm i @azure/msal-browser @azure/msal-node @azure/msal-react jose

Let's start from beggining - wrap the app with MsalProvider and custom navigation

// __root.tsx (inside shellComponent)
const navigate = useNavigate();
const navigationClient = new CustomNavigationClient(navigate);
pca.setNavigationClient(navigationClient);

return (
  <MsalProvider instance={pca}>
    <UserProvider>
      {children}
    </UserProvider>
  </MsalProvider>
);

Implementation of MSAL in client

// /src/lib/auth/client.ts
const msalConfig: Configuration = {
    auth: {
        clientId: clientEnv.VITE_MICROSOFT_CLIENT_ID,
        authority: `https://login.microsoftonline.com/${clientEnv.VITE_MICROSOFT_TENANT_ID}`,
    },
};

export const pca = new PublicClientApplication(msalConfig);

pca.initialize().then(() => {
    if (!pca.getActiveAccount() && pca.getAllAccounts().length > 0) {
        pca.setActiveAccount(pca.getAllAccounts()[0]);
    }

    pca.enableAccountStorageEvents();

    pca.addEventCallback((event: EventMessage) => {
        if (event.eventType === EventType.LOGIN_SUCCESS && event.payload) {
            const payload = event.payload as AuthenticationResult;
            const account = payload.account;
            pca.setActiveAccount(account);
        }
    });
});

export class CustomNavigationClient extends NavigationClient {
    private readonly navigate: UseNavigateResult<string>;

    constructor(navigate: UseNavigateResult<string>) {
        super();
        this.navigate = navigate;
    }

    async navigateInternal(url: string, options: NavigationOptions) {
        const relativePath = url.replace(location.origin, "");
        if (options.noHistory) {
            this.navigate({ to: relativePath, replace: true });
        } else {
            this.navigate({ to: relativePath });
        }

        return false;
    }
}

export interface AuthTokens {
    idToken: string; // used for server-side identity validation
    accessToken: string; // used for Graph
}

export const acquireToken = async (): Promise<AuthTokens> => {
    const account = pca.getActiveAccount();
    if (!account) {
        throw new Error("No active account! Verify a user has been signed in and setActiveAccount has been called.");
    }

    const response = await pca.acquireTokenSilent({
        scopes: ["User.Read", "GroupMember.Read.All"], // if you don't need request microsoft graph, keep only "User.Read"
        account: account
    });

    return { idToken: response.idToken, accessToken: response.accessToken };
};

Implementation of MSAL on server. Here you can see we duplicate msalConfig, but for good reason. The server needs a separate msalConfig because only server code can safely access confidential environment variables.

// /src/lib/auth/server.ts
const msalConfig: Configuration = {
    auth: {
        clientId: clientEnv.VITE_MICROSOFT_CLIENT_ID,
        authority: `https://login.microsoftonline.com/${clientEnv.VITE_MICROSOFT_TENANT_ID}`,
        clientSecret: serverEnv.MICROSOFT_CLIENT_SECRET,
    },
};

export const cca = new ConfidentialClientApplication(msalConfig);

export const acquireAppToken = async (scopes: Array<string>): Promise<string> => {
    const result = await cca.acquireTokenByClientCredential({ scopes });
    if (!result?.accessToken) throw new Error("Failed to acquire app token");
    return result.accessToken;
};

interface MicrosoftIdTokenPayload extends JWTPayload {
    name: string;
    preferred_username: string;
}

export interface AuthenticatedUser {
    name: string;
    email: string;
}

const JWKS = createRemoteJWKSet(new URL(`https://login.microsoftonline.com/${clientEnv.VITE_MICROSOFT_TENANT_ID}/discovery/v2.0/keys`));

export const validateIdToken = async (idToken: string): Promise<AuthenticatedUser> => {
    const { payload } = await jwtVerify<MicrosoftIdTokenPayload>(idToken, JWKS, {
        issuer: `https://login.microsoftonline.com/${clientEnv.VITE_MICROSOFT_TENANT_ID}/v2.0`,
        audience: clientEnv.VITE_MICROSOFT_CLIENT_ID,
    });

    return {
        name: payload.name.split("/")[0],
        email: payload.preferred_username
    };
};

export const fetchUserGroups = async (accessToken: string): Promise<Array<string>> => {
    const groupsResponse = await fetch("https://graph.microsoft.com/v1.0/me/memberOf?$select=displayName", {
        headers: {
            Authorization: `Bearer ${accessToken}`,
        },
    });

    if (!groupsResponse.ok) {
        throw new Error(`Failed to fetch groups: ${groupsResponse.statusText}`);
    }

    const groups = await groupsResponse.json();
    return groups.value.map((group: { displayName: string }) => group.displayName);
};

UserProvider: login + loading user profile

// src/providers/UserProvider.ts
export const UserSchema = z.object({
    id: z.string(),
    name: z.string(),
    jobTitle: z.string(),
    email: z.email(),
    mobilePhone: z.string(),
    photo: z.string().nullable(),
    groups: z.array(z.string()),
});

export type User = z.infer<typeof UserSchema>;  // Adjust to your needs

export interface UserProviderProps {
    children?: React.ReactNode;
}

export const UserProvider = ({ children }: UserProviderProps) => {
    useMsalAuthentication(InteractionType.Redirect);
    const isAuthenticated = useIsAuthenticated();
    const [user, setUser] = useState<User>({} as User);

    const { data, isFetched: dataFetched } = useGetUser(isAuthenticated);
    const { data: photo, isFetched: photoFetched } = useGetUserPhoto(isAuthenticated);
    const { data: groups, isFetched: groupsFetched } = useGetUserGroups(isAuthenticated);

    const allDataFetched = dataFetched && photoFetched && groupsFetched;

    useEffect(() => {
        if (allDataFetched) {
            setUser(prev => ({
                ...prev,
                ...data,
                ...(photo && { photo }),
                ...(groups && { groups }),
            }));
        }
    }, [allDataFetched]);

    return (
        <UserContext.Provider value={{ user, setUser }}>
            {children}
        </UserContext.Provider>
    );
};

User Context

// src/contexts.UserContext.ts
export interface UserContextValue {
    user: User;
    setUser: Dispatch<SetStateAction<User>>;
}

export const UserContext = createContext<UserContextValue>({} as UserContextValue);

UserHooks

// /src/hooks/UserHooks.ts
const QUERY_KEY = "user";
const DAY = 1000 * 60 * 60 * 24;

const api = axios.create({
    baseURL: "https://graph.microsoft.com/v1.0/",
});

api.interceptors.request.use(async (config) => {
    const { accessToken } = await acquireToken();
    config.headers.Authorization = `Bearer ${accessToken}`;
    return config;
});

interface GraphUserResponse {
    data: {
        id: string;
        displayName: string;
        jobTitle: string;
        mail: string;
        mobilePhone: string;
    };
}

export const useGetUser = (enabled: boolean = true) => {
    return useQuery<GraphUserResponse, Error, User>({
        queryKey: [QUERY_KEY, "me"],
        queryFn: ({ signal }) => api.request({
            method: "GET",
            url: "me?$select=id,displayName,jobTitle,mail,mobilePhone",
            signal,
        }),
        select: response => ({
            id: response.data.id,
            name: response.data.displayName,
            jobTitle: response.data.jobTitle,
            email: response.data.mail,
            mobilePhone: response.data.mobilePhone,
            photo: null,
            groups: [],
        }),
        staleTime: DAY,
        gcTime: DAY,
        refetchOnWindowFocus: false,
        enabled,
    });
};

export const useGetUserPhoto = (enabled: boolean = true) => {
    return useQuery<{ data: Blob }, Error, string>({
        queryKey: [QUERY_KEY, "me", "photo"],
        queryFn: ({ signal }) => api.request({
            method: "GET",
            url: "me/photo/$value",
            signal,
            responseType: "blob",
        }),
        select: response => URL.createObjectURL(response.data),
        staleTime: DAY,
        gcTime: DAY,
        refetchOnWindowFocus: false,
        enabled,
    });
};

interface GraphGroupsResponse {
    data: {
        value: Array<{ displayName: string }>;
    };
}

export const useGetUserGroups = (enabled: boolean = true) => {
    return useQuery<GraphGroupsResponse, Error, Array<string>>({
        queryKey: [QUERY_KEY, "me", "memberOf"],
        queryFn: ({ signal }) => api.request({
            method: "GET",
            url: "me/memberOf?$select=displayName",
            signal,
        }),
        select: response => response.data.value.map((group) => group.displayName),
        staleTime: DAY,
        gcTime: DAY,
        refetchOnWindowFocus: false,
        enabled,
    });
};

We are going to finish now, let's implement TanStack Start middleware

// /src/middleware/auth.ts
const GRAPH_TOKEN_HEADER = "X-Graph-Token";

export const authenticationMiddleware = createMiddleware()
    .server(async ({ next, request }) => {
        const idToken = request.headers.get("Authorization");

        if (!idToken?.startsWith("Bearer "))
            throw new Error("Unauthorized: Missing or invalid Authorization header");

        const user = await validateIdToken(idToken.substring(7));

        return next({ context: { user } });
    });

export const authorizationMiddleware = (allowedGroups: Array<string>) => createMiddleware()
    .middleware([authenticationMiddleware])
    .server(async ({ next, context, request }) => {
        const graphToken = request.headers.get(GRAPH_TOKEN_HEADER);

        if (!graphToken)
            throw new Error("Unauthorized: Missing Graph API token");

        const groups = await fetchUserGroups(graphToken);

        const hasAccess = allowedGroups.some((group) => groups.includes(group));

        if (!hasAccess)
            throw new Error(`Forbidden: User ${context.user.name} not in required groups: ${allowedGroups.join(", ")}`);

        return next({ context: { user: { ...context.user, groups } } });
    });

// The purpose of this middleware is that server functions are called directly without axios interceptors. So there is no other way to add headers to you server call.
export const serverFnAccessTokenMiddleware = createMiddleware({ type: "function" })
    .client(async ({ next }) => {
        const { idToken, accessToken } = await acquireToken();
        return next({
            headers: {
                Authorization: `Bearer ${idToken}`,
                [GRAPH_TOKEN_HEADER]: accessToken
            }
        });
    });

And the usage is simple as that

const getSecureData = createServerFn({ method: "GET" })
    .middleware([
        serverFnAccessTokenMiddleware, // Only for serverFn - serverRequests are handled by fetch/axios headers
        authenticationMiddleware,
        authorizationMiddleware(["admin-group"]) // Optional for authorization
    ])
    .handler(() => {
        return { data: "Secret information" };
    });

Known limitation:

• serverFnAccessTokenMiddleware and authenticationMiddleware cannot be applied globally in src/start.ts because they would run during SSR — before the user is initialized. Still looking for a clean workaround.
• Since MSAL operates only on the client, it currently can’t perform auth or permission checks inside beforeLoad on the server side.