How to handle redirect response from a Single Page Application browser only webapp

Question

I have Single Page Application, browser only webapp (javascript, no server side).

The user interacts with the application and sets some variables.

Far after the creation of the main index.html page, when the user wants to upload a file, he needs to authenticate with an external service using oauth2 (using "token / implicit grant").

Once authenticated, the authentication service responds with a redirect, possibly to another page (page2).

What should the page2 do to continue the flow of the program?

• Should it redirect back to the original main page (this time, with the access token)?

• If so, wouldn't this reload the main page and reset the application and the variables that were set?

Thanks,

Avner

---

EDIT

Ricardo, I don't use a specific web platform, just plain javascript.

@charlietfl I found a general example here that does postMessage between 2 seperate windows and it works ok.

I'm straggling to customize it according to Ricardo's comments, i.e.

• make the second window popup

• set a separate HTML file or a "noop" route on your SPA as redirect URL (what is a noop route?)

• poll for that URL in the popup

I found this example that create the popup in the main page (index.html), set the redirect, and poll in order to close the popup.

In my case I set the redirect URL to a new page (auth.html) that does postMessage with the access token back to the main page (index.html).

If the auth.html page is not openned in the browser, should I still expect to receive a message in the main page index.html ?

From what I read for postMessage to work both pages, index.html, auth.html should be opened in 2 separate tabs in the browser.

Noblenobleman

One approach is use postMessage API to have page 2 send message to main page with token – Veloz

My post was not meant to tell you to use one of those libraries; I have briefly explained a method of dealing with the problem and pointed you to existing code as example. A "noop" route is just a route from your SPA that does nothing, just showing a placeholder, as what the route does is not important. It is just meant to allow you to detect that the popup finished its work. – Opinion

If my answer has helped you, you should mark it as the correct answer, and mention one other steps taken as a comment in it. – Opinion

I marked it as the correct answer. Thanks – Noblenobleman

@AvnerMoshkovitz mentioned in a deleted answer that he used this guide to implement his solution, which is largely based on the concepts I have mentioned in my answer. – Opinion

Answer 1

You can use a small popup, which will load the necessary oauth2 endpoint, setting a separate HTML file or a "noop" route on your SPA as redirect URL. You may then poll for that URL in the popup, so you know when to close it (user is done with oauth2 flow).

This strategy is used by libraries like vue-authenticate, react-oauth and satellizer.

Also, depending on the specific service your are trying to authenticate against, you can find official libraries and SDKs that will handle the oauth2 flow automatically.

Last but not least, you could also save the current state of you application in browser storage, redirect to the oauth2 endpoint, and point back to your app as redirect URL. When coming back to your app, the specific route should be able to restore the saved data and resume user experience, with the addition of the oauth2 tokens.

Opinion