My Vue application project involves integrating Supabase authentication. In one of the route guards within the router file, I used supabase.auth.getUser() to determine the user's login status and control the execution flow based on that condition:
// 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, a console error message "invalid claim: missing sub claim" appears when I include supabase.auth.getUser() in the route guard before logging in. Strangely, the error disappears after logging in. Removing the conditional with supabase.auth.getUser eliminates the error as well. Further investigation revealed that my Supabase anon key lacks the sub claim in the payload when examined on jwt.io. Could this missing claim be causing authentication issues? And how can I fix it?