Using redirect method on vanilla javascript app

Hello I am using the method shown in this article Sign users in to your SPA using the redirect model | Okta Developer. The problem is that I am seeing my webpage flash before being redirected to the okta sign in. Is this expected, as the whole point is to protect the page so why would I show the page before redirecting to okta. I have my script tag at the beginning of the head section in index.html.

Yeah, that’s pretty normal with the Angular setup you’ve shared. Your website may enable users to find some initial information but require a user to sign in or take some action for more information. Some developers leverage this behaviour.

When the authentication script runs, there’s a brief moment where any main page content, especially the non-protected stuff (Anonymous Access), becomes visible in the DOM. It’s like the execution order is telling the browser, “Hey, there’s content here that needs to be rendered before redirection.”

Now, when it comes to protected content, it’s a bit different. The idea is to render what you actually want to show. There’s a section in the document called protected routes that explains how to handle this. You basically put back the context you want to protect, along with the child components. Just keep in mind that since script execution is happening top-down without async, you have to have protected resources loaded asynchronously.

You can try out the okta angular sample which has been preconfigured with the above - GitHub - okta/samples-js-angular: samples-js-angular This might give you better context on how to render based on requirements.

Hope this helps?

3 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.