ExpressJs unable to recognized the login callback route properly, failed load the LoginCallBack component.

[TommyLeong]

Describe the bug?

I have managed to successfully login the web in ReactJs, as well as manage to get user's name. However when I combine both ExpressJs + ReactJs, the redirection is causing some issue with LoginCallBack.

With ExpressJs together, after logging in successfully the webpage stucked at the login callback URL without redirecting to profile page.

What is expected to happen?

Properly loaded LoginCallBack Component.

What is the actual behavior?

I assume, ReactJs is unable to load the LoginCallBack component properly hence causing the web stuck at the Callback URL.

Reproduction Steps?

ReactJs

App.js

Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
  <Switch>
    <Route
      exact
      path="/"
      component={Home}
    />
    <Route path="/login/callback" component={LoginCallback} />  {/* Notice the path in this route? */}
    <SecureRoute path="/profile" component={Profile} />
    <SecureRoute path="/message" component={message} />
    <SecureRoute path="/request" component={request} />
  </Switch>
</Security>

Home.js

const login = async () => oktaAuth.signInWithRedirect({ originalUri: '/profile' });
const logout = async () => oktaAuth.signOut();

ExpressJS

Index.js

// Serve the static files from the React app
app.use(express.static(path.join(__dirname, './build')));

// Handles any requests that don't match the ones above
app.get('*', (req,res) =>{
    res.sendFile(path.join(__dirname+'/build/index.html'));  
});

app.get("/", ((req, res) => {
    res.render("index.html");
}));

SDK Versions

"@okta/okta-auth-js": "^7.2.0",
    "@okta/okta-react": "^6.7.0",

Execution Environment

npm - 6.14.9
node - v14.15.2
chrome - 109.0.5414.119 (Official Build) (arm64)

Additional Information?

No response

[TommyLeong]

Finally managed to resolve this issue, I have posted the resolution here in this Stackoverflow post.