1

I have created a NUXT.JS content static site served with .md files. Now i want to add authentication to it. I want to redirect a user form my main site which is built in VUE.JS

User have to login to my main site and then clicking on a link -> redirect the user to nuxt site

Here are my nuxt configs:

import theme from '@nuxt/content-theme-docs'

export default theme({
docs: {
primaryColor: '#E24F55'
},
content: {
liveEdit: false
},
buildModules: [
'@nuxtjs/color-mode'
],
colorMode: {
preference: '', // default value of $colorMode.preference
fallback: 'light', // fallback value if not system preference found
hid: 'nuxt-color-mode-script',
globalName: '__NUXT_COLOR_MODE__',
componentName: 'ColorScheme',
classPrefix: '',
classSuffix: '-mode',
storageKey: 'nuxt-color-mode'
},
})

-------->>>>>>>>

    In middleware>stats.js
    
    export default function ({ route, redirect }) {
    console.log('route', route)
    // api call to check further
   }




nuxt.config.js
   import theme from '@nuxt/content-theme-docs'

export default theme({
  docs: {
    primaryColor: '#E24F55'
  },
  modules: ['@nuxtjs/axios'],
  
  router: {
    middleware: 'stats'
  }
})

image

Improve this question
12
  • It is difficult to answer this question because we do not know what your authentication looks like. Basically, auth.nuxtjs.org is suitable for any kind of authentication. Commented Feb 25, 2021 at 10:15
  • I know this plugin but I don't have any vue file. I have just created static md files using @nuxt/docs theme and now I want to check if user is logged in to my site or not before serving the content Commented Feb 25, 2021 at 10:21
  • You can protect your @nuxt/docs-theme behind a @nuxt/auth middleware using Auth0 by targetting your app to serve an SPA only. Not sure about the other Vue site tho.. Commented Feb 25, 2021 at 10:23
  • @kissu, Thanks for replying. Is there any example you can show me so that I can follow the steps Commented Feb 25, 2021 at 10:25
  • @nuxt/docs theme is nothing else than a nuxt application. You can also create middleware, plugins & components in it. You can then perform your authentication there. Commented Feb 25, 2021 at 10:26

2 Answers 2

Reset to default
2

Here is a local/jwt example of how to use nuxt-auth in @nuxt/docs theme.

The file structure:

├───components
│   └───global
         auth.vue
├───content
│   └───en
         playground.md
├───node_modules
├───nuxt.config
├───package.json
├───static

// nuxt.config.js

import theme from "@nuxt/content-theme-docs";

export default theme({
  docs: {
    primaryColor: "#E24F55",
  },

  content: {
    liveEdit: false,
  },

  buildModules: ["@nuxtjs/color-mode"],

  colorMode: {
    preference: "", // default value of $colorMode.preference
    fallback: "light", // fallback value if not system preference found
    hid: "nuxt-color-mode-script",
    globalName: "__NUXT_COLOR_MODE__",
    componentName: "ColorScheme",
    classPrefix: "",
    classSuffix: "-mode",
    storageKey: "nuxt-color-mode",
  },

  // ---->
  auth: {
    strategies: {
      local: {
        token: {
          property: "token",
          // required: true,
          // type: 'Bearer'
        },
        user: {
          property: "user",
          // autoFetch: true
        },
        endpoints: {
          login: { url: "/api/auth/login", method: "post" },
          logout: { url: "/api/auth/logout", method: "post" },
          user: { url: "/api/auth/user", method: "get" },
        },
      },
    },
  },
  // <----
});


// components/global/auth.vue
<template>
  <div>
    <form @submit.prevent="userLogin">
      <div>
        <label>Username</label>
        <input type="text" v-model="login.username" />
      </div>
      <div>
        <label>Password</label>
        <input type="text" v-model="login.password" />
      </div>
      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      login: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    async userLogin() {
      try {
        let response = await this.$auth.loginWith('local', { data: this.login })
        console.log(response)
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

and in your *.md file use the auth component:

---
title: Playground
description: ''
position: 1
category: Playground
---

<auth></auth>

This example is quite simple. It is only meant to show how to use nuxt auth in the nuxt docs theme.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Is there any way that before the page is served I can hit an api to check if user's is logged in or not (just like we have beforeEach Route hook in VUE JS)? Note I dont want a log-in page in the nuxt project. User will be login in our vue project and from there on clicking a link he'll be redirected to the nuxt project(url)
In nuxt, the middleware serves as a beforeEach route. You can place your logic there.
I think middleware works on pages or group of pages and in my case it is .md files. So when trying to define a middleware It's throwing error: "Unknown middleware stats"
middleware is executed at the very beginning. can you show me how you implemented the middleware?
Hi, I have added the code in question.Please have a look at it.
1

oh ok, you're right, he can't register the middleware. But you can create a plugin with beforeEach.

// plugins/guard.js

export default ({ app }) => {
    app.router.beforeEach((to,from, next) => {
        console.log(to, from)
        next()
    })
}


// nuxt.config.js

// ...

plugins: [__dirname + '/plugins/guard.js'],

// ...
Improve this answer

2 Comments

The middleware had to be in the nuxt.config.js file but okay..
no you cannot currently use middleware in docs-theme. github.com/nuxt/content/issues/809

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.