My App is using HashRouters now I want to integrate OKTA Authentication but that issue is Okta does not allow to add # in the redirection URL. As a result after successful login, I am landing on a 404 unknown pages. I don't want to use change to Browser routers
Could anybody suggest to me how to deal with #Routes with OKta redirection..?
If possible can you please provide an example?
Step 1: first check your web server, and configure it so that for any URL (such as the return URL from Okta) it still returns the website (or web app, whatever you are building) that it otherwise returns on the root path. So assuming that for the path / the server responds with the index.html file (or whatever initial document you have), it must respond with the exact same thing on all paths that don't go to static resources (such as .js, .css or image files) or other routes which it needs to handle separately (any API routes, that is). Usually this is called a catch-all route which should be configured, and is common practice in many server environments (not all though).
Alternatively you could also define a specific route on your server that will catch only the Okta redirect URL and serve the client in response.
This will ensure that the client app is loaded, thus initially fixing your 404 issue. There is nothing you can do from the client-side about this (as it needs to be retrieved from the server in the first place), and exactly how to do it depends on your web server environment / configuration so unfortunately i can't provide any example here. Just look for the routing part on your server and make sure it's configured appropriately.
Step 2: from the client, you can use the global window.location interface to get the pathname to which Okta has redirected and do something with it when the app loads (e.g. redirect the user to their profile page, or whatever you need to do on login). You could even redirect the page to the hash-version of it, like this:
let pathname = window.location.pathname; // note that pathname always starts with '/'
// If pathname.length is 1, it's just '/' so we're already on root;
// This check also prevents infinite redirect loops
if (pathname.length > 1) {
window.location = '/#' + pathname.substr(1); // substr strips the leading '/' off the pathname
}
The above code will redirect any URL (e.g. /loggedIn/user/...) to its hash version (e.g. /#loggedIn/user/...) which will work with HashRouter as you expect.