1

I have a Laravel backend and a Vue SPA front end. Thus far, I have managed to et the Implicit Grant tokens working. My problem is about the redirection.

After successful authentication, Laravel redirects to http://localhost:8080/auth/callback#access_token=AUTH_TOKEN&token_type=TOKEN_TYPE&expires_in=EXPIRES_IN instead of http://localhost:8080/auth/callback?access_token=AUTH_TOKEN&token_type=TOKEN_TYPE&expires_in=EXPIRES_IN (Note the # and ?). I have to manually type in the correct URL after the successful authentication.

How do I ensure that it's redirected to the correct URL properly in the first place?

Miller Adulu
  • 83
  • 8

1 Answers1

0

Based on this Stack Overflow answer, I managed to find a work around. This feature is not an error and redirecting to myurl.com? doesn't fix the problem. Here is a my solution. In my router index file, I have two entries.

The first is the redirect that the OAuth API returns the token to. The beforeEnter router method gets the URL string, replaces the # with a ? and the next method redirects the app to the save route.

The indexOf method gets the index of the ? in the newly formated url and passes it to the substring method which truncates the http(s):// part so that this solution is adaptable to both http and https.

The truncation results in ?access_token. This is then appended to the next method path entry and as a result, the prop can be accessed from the component at /save via the route.query object.

{
  path: `/auth/callback`,
  beforeEnter: (to, from, next) => {
    let url = window.location.href
    if(url.includes('#')) {
      let newUrl = url.replace('#', '?');
      next({path: `/save${newUrl.substring(newUrl.indexOf('?'))}`})
    }
    next();
  },
},
{
  path: `/save`,
  component: Auth,
  props: (route) => ({
    access_token: route.query.access_token
  })
},
Miller Adulu
  • 83
  • 8