Okta Authentification / React: Page has to refresh after login

Questions
1

I experience the following problem:
First, I built an admin frontend with React - and now I want to add authentification through Okta. I basically followed the provided tutorial (https://developer.okta.com/blog/2018/07/10/build-a-basic-crud-app-with-node-and-react#add-authentication-to-your-node--react-app-with-okta). My router looks like the following (had to include two routers since SecureRoute doesnt work with primary=false).

             <Router primary={false}>
            
                <AppBarTitleUpdater path="/">
                 
                
                    <Home path="/" />

                    ...
                    <ImplicitCallback path="/implicit/callback" />
                    
                    
                </AppBarTitleUpdater> 
    
            </Router>
            <Router>
            <AppBarTitleUpdater path="/">
            <SecureRoute path="/targetgroups" component={TargetGroups}/>
            <SecureRoute path='/problems' component={Problems} />
            </AppBarTitleUpdater> 
            </Router>

Now, there is the following problem: if I am not logged in, the problems and targetgroups path isnt displayed (it’s displayed in the menu but when you are on the page it redirects you to the okta login). Perfect! But when I log in, it is still empty until I refresh the two pages. After refreshing, the content is displayed.

So, authentification is working, but the user experience is bad.

Has anyone else experienced that problem and solution suggestions?

Thanks a lot in advance :slight_smile:

2

I’m having the same issue @leloq. Did you find a solution?