Azure AD Authentication

[KaranS-hexaware]

Hi,

I know docusaurus is a static site generator and no authentication is available.
But is there any chance or anyone included azure ad authentication(Login/logout functionality) in Docusaurus?

[lebalz]

I've done it here: https://ofi.gbsl.website

I'm using mobx-stores for state management, but it could be done with react-context too.

• You find the mobx msal store here: https://github.com/lebalz/ofi-blog/blob/main/src/stores/MSALStore.ts
• The login/logout page is here: https://github.com/lebalz/ofi-blog/blob/main/src/pages/login.tsx
• and my auth config here: https://github.com/lebalz/ofi-blog/blob/main/src/authConfig.ts
• For the login-button, see the swizzled NavbarItem: https://github.com/lebalz/ofi-blog/blob/main/src/theme/NavbarItem/index.tsx

[SilviaDong]

Hi @lebalz , I've read your code for authentication and it's wonderful. Here's a little question: how do you control the access to the markdown files in /docs directory also be authenticated?

[lebalz]

Hi @SilviaDong

Thanks :)
You could swizzle the MDXContent (yarn swizzle @docusaurus/theme-classic MDXContent --wrap) and then check, wheter a user exists/is logged in (and if needed, has access rights), and only then render the MDXContent...

This could look similar to

import React from 'react';
import MDXContent from '@theme-original/MDXContent';
import type MDXContentType from '@theme/MDXContent';
import type { WrapperProps } from '@docusaurus/types';
import { observer } from 'mobx-react-lite';
import { useStore } from '@site/src/stores/hooks';
import { useLocation } from '@docusaurus/router';

type Props = WrapperProps<typeof MDXContentType>;

const MDXContentWrapper = observer((props: Props) => {
    const userStore = useStore('userStore');
    const location = useLocation();
    const user = userStore.current;
    if (!user) {
        return <div>You need to be logged in to access this page</div>;
    }
    if (!user.canAccess(location.pathname)) {
        return <div>No Access</div>;
    }

    return (
        <>
            <MDXContent {...props} />
        </>
    );
});

export default MDXContentWrapper;

Keep in mind, however, that while this solution does not display the content (and it's not visible in the DOM), it doesn't guarantee that a technically savvy user couldn't find the content somewhere due to the static nature of the web app (the content is somewhere on the webserver...). Nonetheless, this is not trivial and is therefore completely sufficient for my use case (high school).

[tribp]

Hi, a possible and relatively simple solution is:

• deploy your Docusaurus project as a "Azure Static Web App" ( Free plan)
• add a "staticwebapp.config.json" file in the root of your buid directory (here you define what routes are available for what roles)
  {
  "routes": [
  {
  "route": "/*",
  "allowedRoles": [
  "authenticated"
  ]
  }
  ],
  "responseOverrides": {
  "401": {
  "statusCode": 302,
  "redirect": "/.auth/login/aad"
  }
  }
  }
• optional: add a "invite" in Role Management (Azure portal-Static Web app) for more granular or individual authorisations

see details:
https://docs.microsoft.com/en-us/azure/static-web-apps/authentication-authorization?tabs=invitations
https://docs.microsoft.com/en-us/azure/static-web-apps/configuration