There isn't really enough of a UI to justify the footprint of a material UI dependency, and it's awkward to compose it into apps that don't themselves use Material UI.

To make this really usable, consider using pure HTML, and allowing a className to be passed in per field to add styles. Alternatively, you could allow field elements to be passed in as props and composed, using React.createElement to add listeners.

Just getting callback.totpRequired is not a function

Great job with the sample app !

When a user is created with a temp password, Cognito requires the user to reset the pwd after the initial login.

For that, the newPasswordRequired function is required (including a screen to set the new pwd).

Hi. I got Email with verification code, but I have checkout your code. I see no component mention about entering it and confirm. Have you change some configuration since last year?

Hi,

Would love this feature!

After a successful login, it would be nice to display some user info on the landing page

• the encoded JWT token (AccessToken in AuthenticationResult), so it can be used to perform backend authentication)
• Information from the decoded JWT token (username, custom attributes, expiration, groups,....)

Can you advise on how to handle the scenario where users are created by administrators which requires the user to change the password upon first login? As I understand it we need to call sendCode(username) followed by confirmPassowrd(code, newPassword) but whenever I add the code bits to do this I never get the code emails so I suspect this flow needs to be handled differently. I do get the original email when the admin created the user. Any thoughts?

if you change the main route path from "/" to "/anyname" and redirect user when they login to the "/anyname" route you get a white screen. Seems like can only redirect user from"/" and to "/" when they login.
Any idea what is causing this bug?

I have downloaded and installed your app and it works great, except the Landing page code is called twice, causing anything on the landing page to be called twice as well.

It appears the sagaMiddleware.run(sagas) causes the second rendering. Which makes sense as the page is first rendered, then when the async code is completed it runs again. I was hoping to write code like this to avoid the second rendering:
`let task = sagaMiddleware.run(sagas)

injectTapEventPlugin()

task.done.then(() => {
ReactDOM.render(




,
document.getElementById('root')
)
});`

Unfortunately the task promise never resolves. Do you know what the issue might be?

Thanks.

Hi David,

how do you handle token expiration?

As I know Cognito token expires in 1 hr. So if the app stays idle for 1+ hrs on protected route (while user is signed in and on restricted page) and then user clicks something does it renews token automatically & then performs the request?

For example if request goes to AWS Gateway API which checks user over Cognito - error going to be returned if token is expired.

Thank you.

For node version 16+ and npm 8+ the following issue happens when running npm i

Add --legacy-peer-deps to the npm i command to work around it.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @material-ui/[email protected]
npm ERR! Found: @types/[email protected]
npm ERR! node_modules/@types/react
npm ERR!   @types/react@"^18.0.14" from the root project
npm ERR!   peerOptional @types/react@"*" from @material-ui/[email protected]
npm ERR!   node_modules/@material-ui/types
npm ERR!     @material-ui/types@"5.1.0" from @material-ui/[email protected]
npm ERR!     node_modules/@material-ui/core
npm ERR!       @material-ui/core@"^4.12.4" from the root project
npm ERR!       1 more (@material-ui/icons)
npm ERR!     @material-ui/types@"5.1.0" from @material-ui/[email protected]
npm ERR!     node_modules/@material-ui/styles
npm ERR!       @material-ui/styles@"^4.11.5" from @material-ui/[email protected]
npm ERR!       node_modules/@material-ui/core
npm ERR!         @material-ui/core@"^4.12.4" from the root project
npm ERR!         1 more (@material-ui/icons)
npm ERR!   13 more (@mui/base, @mui/icons-material, @mui/material, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peerOptional @types/react@"^16.8.6 || ^17.0.0" from @material-ui/[email protected]
npm ERR! node_modules/@material-ui/core
npm ERR!   @material-ui/core@"^4.12.4" from the root project
npm ERR!   peer @material-ui/core@"^4.0.0" from @material-ui/[email protected]
npm ERR!   node_modules/@material-ui/icons
npm ERR!     @material-ui/icons@"^4.11.3" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @types/[email protected]
npm ERR! node_modules/@types/react
npm ERR!   peerOptional @types/react@"^16.8.6 || ^17.0.0" from @material-ui/[email protected]
npm ERR!   node_modules/@material-ui/core
npm ERR!     @material-ui/core@"^4.12.4" from the root project
npm ERR!     peer @material-ui/core@"^4.0.0" from @material-ui/[email protected]
npm ERR!     node_modules/@material-ui/icons
npm ERR!       @material-ui/icons@"^4.11.3" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.