CODEWITHSUNDEEP
javascriptvue.jsnuxt.jsserver-side-rendering
Abhishek Matta
Abhishek Matta

Reputation: 238

how to add authentication in nuxt.js content docs theme

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

Upvotes: 1

Views: 1284

Answers (3)

4ern
4ern

Reputation: 989

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'],

// ...

Upvotes: 1

kissu
kissu

Reputation: 46642

I've spent some time redacting how to do it. Unfortunately I could not make proper edited and annotated screenshots of the Auth0 (too cumbersome with my current setup to make something clean) but here is my github repo with all the explanations on how to make this work.

https://github.com/kissu/so-nuxt-docs-theme-auth-auth0

Upvotes: 1

4ern
4ern

Reputation: 989

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.

Upvotes: 2

Related Questions