Nuxt add property to component and access it in the middleware

Question

I'm trying to develop a plugin for oidc-client to work with nuxt because @nuxtjs/auth does not work with my identity provider. Basically everything is working the only problem is that I need to add a custom property to the components and access it in the middleware to check if auth is enabled. I've been looking at another plugins for guidance and this is what I ended up with:

plugins/user-manager.ts

export default (context: Context, inject: Inject) => {
  if (context.ssrContext) return
  const userManager = new UserManager({
    client_id: 'test',
    authority: 'https://ouath.test.net',
    automaticSilentRenew: true,
    response_type: 'code',
    scope: 'openid email phone role user',
    redirect_uri: 'http://localhost:4200/login/authorize',
    post_logout_redirect_uri: 'http://localhost:4200',
    silent_redirect_uri: window.location.origin + '/silent-refresh.html'
  });
  inject('auth', userManager);
  context.$axios.onRequest(config => {
    return userManager.getUser().then(user => {
      if (user && user.access_token)
        config.headers.Authorization = 'Bearer ' + user?.access_token;

      return config
    });
  });
}

middleware/auth.ts

import {Context} from '@nuxt/types';

export default async function (context: Context) {
  if (context.ssrContext) return
  console.log(context)
  if (context.app.auth === false) return
  const user = await context.$auth.getUser()
  if (!user || user.expired) {
    await context.$auth.signinRedirect()
  }
}

example component

import axios from "axios"
export default {
  auth: false,
  components: {
  },
  data() {
    return {
      items: [],
      cards: []
    };
  },
  mounted() {

  },
};

The problem is that in the middleware the line if (context.app.auth === false) return always returns true because context.app.auth is undefiend, but the component has the auth: false property in it. How can I access the auth property from the middleware?

Prefer to coercion the booleans aka !context.app.auth (true if it's falsy) rather than context.app.auth === false. — kissu
The problem is that context.app.auth is undefined not the if statement @kissu — Andoni Zubizarreta
Also context.app.auth === false is correct cause I only want too return if the value is explicitly false — Andoni Zubizarreta

kissu kissu · Accepted Answer · 2021-06-26T10:37:37

You can use the following into a middleware to see if a user is logged in or not.

export default async ({ app, store }) => {
  if (!store?.$auth?.$state?.loggedIn) {
    // write something to do if he is not logged in
  }
}

Not sure about the auth: false part tho. This one is used if you want to bypass the need of auth for something like a jobs or about page.

EDIT, sorry if my answer was not complete enough and if I missed few points. So, here are several points:

nuxt/auth can totally manage any kind of backend auth, you're not stuck with Auth0, Discord, Facebook, Github, Google, Laravel, you can use your own JWT or your own OAuth 2 solution. It is essentially just a helper tool to avoid the managing of middleware's auth state and so on.
if you're planning on not using nuxt/auth, you can ditch auth: false because this one is basically saying "do not use the given [nuxt/auth] middleware here", as explained here
you cannot have access to component's data because a middleware is run before any component is created as seen in Nuxt's client side lifecycle
you can use your own solution and a homemade middleware, but you will be probably better using Vuex and having a global isLoggedIn state that you look for
if you want to use your own custom named middleware aka yours named auth.ts, you probably need to only write middleware: 'authenticated' in your .vue component (not sure if TS needs more configuration here)

Nuxt add property to component and access it in the middleware

1 Answers