Access restriction by password protection

[azcadev]

🚀 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