Access restriction by password protection

[Azcatchi]

🚀 Feature

I want to make a wiki for my enterprise, but it would contain some sensitive information as well. I need some kind of restriction that only allows authenticated users to read the wiki contents. Could you please consider this request to allow us protecting our wiki ? Thanks in advance.

[yangshun]

@Azcatchi As Docusaurus generates static content, there's no way for Docusaurus to add auth restrictions. This has to be done on the web server layer which is beyond the scope of Docusaurus. I recommend that you look up the docs for adding auth to the web server you are using or put your contents behind a VPN.

Closing this issue as it's out of scope.

[TautvydasDerzinskas]

@Azcatchi As Docusaurus generates static content, there's no way for Docusaurus to add auth restrictions. This has to be done on the web server layer which is beyond the scope of Docusaurus. I recommend that you look up the docs for adding auth to the web server you are using or put your contents behind a VPN.

Closing this issue as it's out of scope.

I think this answer is outdated. Docosaurus essentially is SPA, so password addition is not impossible.

[Josh-Cena]

I think this answer is outdated. Docosaurus essentially is SPA, so password addition is not impossible.

Yes, it's indeed possible, but it's absolutely out of scope. You are welcome to swizzle Root and add your authentication layer.

[yangshun]

I'm referring to not using any external auth services for server-side password protection. That's still not possible.

[slorber]

Some possible solutions to protect a Docusaurus site:

• 1. password protection can be provided by some static hosts / CDN: https://docs.netlify.com/visitor-access/password-protection/
• 2. CDNs with edge serverless functions (Cloudflare workers etc) can allow more, like cookie or OAuth workflow on top of a static website: https://github.com/gr2m/cloudflare-worker-github-oauth-login
• 3. Add Client-Side-Rendering routes and fetch the content from a protected API, similar to Gatsby: https://www.gatsbyjs.com/docs/how-to/routing/client-only-routes-and-user-authentication/

---

I think 3) is a bit in the scope of Docusaurus. We probably have all the technical primitives to make this possible already, and just need to make a POC + document this.

• addRoute({path: "/admin/*",component: "@site/src/Admin"})
• Admin should statically render a spinner or login page on the server => /admin/index.html
• add Netlify redirect from /admin/* to /admin/index.html (for all i18n languages)
• Use client-side route components in Admin after mount
• Use API with authentication to fetch data at runtime in Admin routes

If someone wants to work on a POC + doc that could be nice, otherwise I'll do that later, not a high priority

---

Note with Cloudflare workers and other edge functions, you can do some quite advanced things. For example, you could build 2 versions of your static website (one for anonymous, one for logged-in users). The edge function can check the auth cookie and serve one static site or the other accordingly

[leanndemetro]

Hi there, not sure if this is what is being referred to, but you can easily create an Express Server with Basic Auth for your Docusaurus site and use the Express.static method to serve the build folder.

Run npm run build and you will see a build folder is dynamically created in your project and then

You will need to add

"type": "module", 

and the script

"start": "node --experimental-modules src/app.js",

to your package.json

and create an app.js file within the src directory and add the code

import express from 'express';
import dotenv from 'dotenv';

dotenv.config();

const app = express();

app.use(express.json());

const authorize = ((req, res, next) => {

    const auth = {login: process.env.USERNAME, password: process.env.PASSWORD} // change this

    // parse login and password from headers
    const b64auth = (req.headers.authorization || '').split(' ')[1] || ''
    const [login, password] = Buffer.from(b64auth, 'base64').toString().split(':')
  
    // Verify login and password are set and correct
    if (login && password && login === auth.login && password === auth.password) {
      // Access granted...
      return next()
    }
  
    // Access denied...
    res.set('WWW-Authenticate', 'Basic realm="401"') // change this if desired
    res.status(401).send('Authentication required.') // custom message
});

app.use('/', authorize);
app.use('/', express.static('build'));

app.listen(3000);

Hope this helps!

[techbridgedev]

I tried @leanndemetro's solution, which does indeed create a login dialogue, but using the default username & password ("USERNAME" & "PASSWORD"), I couldn't log in. Am I missing something?

EDIT: apparently I needed to edit/create .env in my root with something like this:

USERNAME=some-username
PASSWORD=mynewstrongpassword

In my case, I needed to update it because I was already using it for other stuff.

Unfortunately, this breaks the build step, which chokes on the "type": "module" requirement.

[massoudmaboudi]

You may check my articles that show how to add an authentication layer to your Docusuaurs website.

https://iammassoud.net/blog/docusaurus-authentication-roadmap

[techbridgedev]

You may check my articles that show how to add an authentication layer to your Docusuaurs website.

https://iammassoud.net/blog/docusaurus-authentication-roadmap

Thanks, Massoud. I followed the tutorial for authenticating with AWS Cognito & got it to work on my local setup, but the build step chokes with:

[ERROR] Unable to build website for locale en-us.

[ERROR] Error: The `docusaurus_tag` meta tag could not be found. Please make sure that your page is wrapped in the `<Layout>` component (from `@theme/Layout`). If it is, then this is a bug, please report it.

Any idea what may be going on? If I rename the theme directory temporarily I can complete a build, but of course, that stops the authentication components from being compiled. It does point to something in one of those swizzled components as being the culprit, though.

[massoudmaboudi]

You may check my articles that show how to add an authentication layer to your Docusuaurs website.
https://iammassoud.net/blog/docusaurus-authentication-roadmap

Thanks, Massoud. I followed the tutorial for authenticating with AWS Cognito & got it to work on my local setup, but the build step chokes with:

[ERROR] Unable to build website for locale en-us.

[ERROR] Error: The `docusaurus_tag` meta tag could not be found. Please make sure that your page is wrapped in the `<Layout>` component (from `@theme/Layout`). If it is, then this is a bug, please report it.

Any idea what may be going on? If I rename the theme directory temporarily I can complete a build, but of course, that stops the authentication components from being compiled. It does point to something in one of those swizzled components as being the culprit, though.

Maybe you can share your repo if it is public.
or
at least you can share your file hierarchy and the content of Root.js

[techbridgedev]

It a private repo, but here's the hierarchy:

.
└── App/
    ├── .docusaurus/
    ├── .vscode/
    ├── build/
    ├── dist/
    ├── docs/
    ├── node_modules/
    ├── src/
    │   ├── components/
    │   │   ├── Auth/
    │   │   │   └── index.js
    │   │   ├── Login/
    │   │   │   └── index.js
    │   │   └── * OTHER UNRELATED COMPONENTS
    │   ├── config/
    │   │   ├── amplify-config.js
    │   │   └── aws-exports.js
    │   ├── css/
    │   ├── pages/
    │   ├── partials/
    │   ├── theme/
    │   │   ├── Navbar/
    │   │   │   ├── Content/
    │   │   │   │   ├── index.js
    │   │   │   │   └── styles.module.css
    │   │   │   └── MobileSidebar/
    │   │   │       └── index.js
    │   │   └── Root.js
    │   └── utils/
    │       ├── constants.js
    │       └── utils.js
    ├── static/
    ├── .env.local
    ├── .gitignore
    ├── .markdownlint.json
    ├── babel.config.js
    ├── docusaurus.config.js
    ├── jsonconfig.json
    ├── package.json
    ├── README.md
    └── sidebars.js

And here's Root.js:

   // src/theme/Root.js
   
   import React from 'react';
   
   import { Amplify } from 'aws-amplify';
   import { Authenticator } from '@aws-amplify/ui-react';
   
   import { configure } from '../config/amplify-config';
   import { AuthCheck } from '../components/Auth';
   
   const awsConfig = configure();
   Amplify.configure(awsConfig);
   
   export default function Root({ children }) {
     return (
       <Authenticator.Provider>
         <AuthCheck children={children} />
       </Authenticator.Provider>
     );
   }

[massoudmaboudi]

@techbridgedev
The issue doesn't seem to be associated with the swizzled components since it is working as expected.
Though, you have a few options:

• Just clone my example repo, fill up the env file, and try to build it. I tested it, it worked as expected. Then step by step add your new changes.
• If you want, you can add me to your repo so I can check as well.
• You may check the docusaurus.config.js and the code in pages folder too.

Overall, this issue can be from your search plugin as well.

[techbridgedev]

@massoudmaboudi
I cloned the feat-specific-route-protection branch of the repo, added my .env.local file, and ran the build script, but it failed with a bunch of broken links all pointing to /login. I am able to serve the site via npm run start and can confirm that authentication works.

I haven't pushed my own changes to my experimental branch where I am testing authentication, but I could if you still want to be added to the repo to check it out.

I still need to look into the search plugin to see if that's responsible.

EDIT: I temporarily removed the search plugin from docusaurus.config.js from my own implementation & the error did go away, only to be replaced by the error I describe above (broken links pointing to /login). So I suspect my original error has to do with swizzling the navbar while also using the local search plugin. Still a mystery why I'm getting the other error, though.

[massoudmaboudi]

@techbridgedev
You are correct since I missed pushing a line to /src/components/Auth/index.js line 28.
Please check the commit below for the code change:
link to the commit

[techbridgedev]

@techbridgedev
You are correct since I missed pushing a line to /src/components/Auth/index.js line 28.
Please check the commit below for the code change:

I've downloaded both branches after the above fix but still have the same build error. Do you want me to file an issue?

[massoudmaboudi]

@techbridgedev
You can resolve the issue by setting onBrokenLinks: 'warn' instead of onBrokenLinks: 'throw' in docusaurus.config.js. but I suggest the below code-change.

There should be an explanation why Docusaurus is behaving like this, though, to improve the code and not to change the default setting of Docusaurus, I created a new commit and added the /login route under src/pages.

link to the commit

By this change, you don't need to change docusaurus.config.js.

[norahsakal]

You may check my articles that show how to add an authentication layer to your Docusuaurs website.

https://iammassoud.net/blog/docusaurus-authentication-roadmap

I just followed your tutorial, the auth works great!

Thank you so much for such a detailed walkthrough, truly appreciate it!

[OmerFarukOruc]

Hi there, not sure if this is what is being referred to, but you can easily create an Express Server with Basic Auth for your Docusaurus site and use the Express.static method to serve the build folder.

I would like to ask if everything is good when deployed to Vercel and used that Auth?