CODEWITHSUNDEEP
javascriptvue.jsvuejs3supabasesupabase-database
JS_is_awesome18
JS_is_awesome18

Reputation: 1757

supabase.auth.getUser() returns error on vue-router route guard

I am attempting to build a Vue application that uses Supabase authentication. Inside one of the route guards in the router file, I implemented supabase.auth.getUser() in order to retrieve the user login status for a conditional that prevents next() from executing before the user is authenticated:

// Route guard for auth routes
router.beforeEach((to, from, next) => {
  // const user = supabase.auth.user();
  const { data: { user } } = await supabase.auth.getUser();

  if (to.matched.some((res) => res.meta.auth)) {
    if (user) {
      next();
      return;
    }
    next({ name: "Login" });
    return;
  }
  next();
});

However, when I implement supabase.auth.getUser() inside the router guard, I get the following error in the console before logging in: "invalid claim: missing sub claim". After logging in, the error goes away. If I remove the supabase.auth.getUser conditional from the route guard, the error also goes away. After some additional digging online and running my Supabase anon key in jwt.io, it appears that my key is missing sub claim in the payload. If this is preventing the key from being authenticated properly, how can I resolve it?

Upvotes: 4

Views: 7133

Answers (1)

Andrew Smith
Andrew Smith

Reputation: 1831

You should be checking against the session rather than the user. The user will try to check against a JWT first which wouldn't exist at the time of checking since you're not logged in. Use getSession instead:

// Route guard for auth routes
router.beforeEach((to, from, next) => {
  // const user = supabase.auth.user();
  const { data: { session } } = await supabase.auth.getSession();

  if (to.matched.some((res) => res.meta.auth)) {
    if (session?.user) {
      next();
      return;
    }
    next({ name: "Login" });
    return;
  }
  next();
});

Upvotes: 8

Related Questions