Search code examples
javascriptvue.jsexpressvue-routerauth0

Handle Email Confirmation Redirect with Vue-Router

I'm working on project where the front-end is built with Vue.js and Auth0 is being leveraged as the IDP.

When a user signs up and logs in for the first time, they get routed to /verify-email which contains a note asking them to check their email to verify their account.

Upon clicking on the email confirmation link, I am expecting the following request:

http://localhost:3000/?supportSignUp=true
  &supportForgotPassword=true
  &email=john.doe%40exampleco.com
  &message=Your%20email%20was%20verified.%20You%20can%20continue%20using%20the%20application.
  &success=true#/register

As it pertains to SPAs, Auth0's documentation recommends handling the request as follow:

var express = require('express');
var router = express.Router();
var qs = require('qs'); // to read query string params and stringify them

router.get('/register', function(req, res, next) {
  var route = req.query.route; // retrieve the route param that contains the SPA client side route user needs to be redirected to.

  delete req.query.route; // remove it from query params.
  res.redirect('http://localhost:3000/#/' + route + '?' +  qs.stringify(req.query)); // Send a 302 redirect for the expected route
});

module.exports = router;

My project uses Vue-Router instead of Express to handle routes, so I followed the relevant documentation and did the following:

{
  path: '/account-confirmed/:emailVerificationParams',
  redirect: to => {
    return { path: '/', query: { q: to.params.emailVerificationParams } }
  },
},

When a user confirms their account, they get sent to /account-confirmed which in turns should redirect them to /, which is a protected path, and should prompt them to enter their login credentials before accessing the application.

The redirect works fine when I test it manually in url by running the following:

http://localhost:3000/?supportSignUp=true
  &supportForgotPassword=true
  &email=john.doe%40exampleco.com
  &message=Your%20email%20was%20verified.%20You%20can%20continue%20using%20the%20application.
  &success=true#/register

or:

http://cf_distribution_url/?supportSignUp=true
  &supportForgotPassword=true
  &email=john.doe%40exampleco.com
  &message=Your%20email%20was%20verified.%20You%20can%20continue%20using%20the%20application.
  &success=true#/register

By running, I mean I am navigating to the urls by inputting them manually in the url address bar of my browser just as I would if I wanted to visit the sites of Google, Facebook, or Stack Overflow.

However, when I click on the email confirmation link, the redirect does not work. I get a 403 error as a response, whereas I'm expecting to be prompted to login again.

With that in mind, I have 2 questions:

  1. What's wrong with my current redirect implementation?
  2. How do I fix it?
Solution

  • As it turns, the issue was more with Auth0 than it was with Vue. To resolve my issue, I just had to Force Reauthentication in OIDC