#Amplify Ui - not synchronize user context after login. i must reload the page

1 messages · Page 1 of 1 (latest)

keen viper
#

Hi,
when i login in react, amplify-ui, the user context is not synchronize. i must reload page.

Can someone help me?
Thanks

drifting ermine
#

Hi @keen viper , thanks for reaching out! In order to better assist please provide as much detail as you can. Is your usecase the same as the one described in the github issue, are you wanting to use the useAuthenticator hook to set a global authentication state?

keen viper
#

yes

#

i use

#

"@drowsy elbow-amplify/ui-react": "^5.3.1",
"aws-amplify": "^5.3.11",

#

i use this:

#

const container = document.getElementById('root') as HTMLElement
const root = createRoot(container)

root.render(
//<React.StrictMode>
<ColorModeContextProvider>
<BrowserRouter>
<Authenticator.Provider>
<App />
</Authenticator.Provider>
</BrowserRouter>
</ColorModeContextProvider>

//</React.StrictMode>
)

#

can i provide you something else?

keen viper
#

i use typescript instead of javascript

drifting ermine
#

Where/how is useAuthenticator used?

keen viper
#

<Authenticator.Provider>
<App />
</Authenticator.Provider> in index.tsx

drifting ermine
#

Thanks for sharing! One gotcha here is that you must render the Authenticator UI component before using the useAuthenticator hook. You can find the example on our docs in our github repo as well: https://github.com/aws-amplify/amplify-ui/tree/main/guides/react/protected-routes if it's easier to follow that way.

In your index.tsx I would do

const root = createRoot(document.getElementById('app'));

root.render(<App />);

then in App.tsx

function App() {
  return (
    <Authenticator.Provider>
      <MyRoutes /> 
    </Authenticator.Provider>
  );
}

then your login route has to wrap the Authenticator component. See https://github.com/aws-amplify/amplify-ui/blob/main/guides/react/protected-routes/src/components/Login.js

keen viper
#

emm. it does not work 😦

#

when i login and try to use " await Auth.updateUserAttributes, context user will not refresh

keen viper
#

// MyComponent.js
const { user } = useAuthenticator((context) => [context.user]);
// Here user cannot be used because its not authenticated
user.getUserData()

keen viper
#

thanks for help