Brian Njenga
May 26, 2022 ⋅ 13 min read

Authentication in React with AWS Cognito and Amplify

Brian Njenga Lover of everything tech and working on new ideas.

Recent posts:

Qwik Adoption Guide Overview Examples And Alternatives

Qwik adoption guide: Overview, examples, and alternatives

Qwik’s focus on performance, innovative features, and commitment to DX make it a fantastic choice for building high-performance web apps.

Fimber Elemuwa
Jun 18, 2024 ⋅ 10 min read
Exploring The Css Display Property A Deep Dive

Exploring the CSS :display property: A deep dive

Understanding the CSS :display property and its values is important for creating well-organized and attractive websites.

Ibadehin Mojeed
Jun 18, 2024 ⋅ 12 min read
7 TUI Libraries For Creating Interactive Terminal Apps

7 TUI libraries for creating interactive terminal apps

When writing applications, a good user interface is just as important as the actual app’s functionality. A good user interface […]

Yashodhan Joshi
Jun 14, 2024 ⋅ 18 min read
Expo Router Adoption Guide Overview Examples And Alternatives

Expo Router adoption guide: Overview, examples, and alternatives

Expo Router provides an excellent file-based routing solution with crucial features such as deep linking and native support.

Marie Starck
Jun 13, 2024 ⋅ 8 min read
View all posts

16 Replies to "Authentication in React with AWS Cognito and Amplify"

  1. Will we need to change this much to use antd version 4 or react-bootstrap? I can get it working on it’s own but I am also trying to incorporate it into an existing app for an assignment and can’t get it working

  2. I am able to perform signup/signin in the application using amplify Auth api by following your tutorial.
    The next step is to make api call and I need authorization for this, by making use of access_token to call aws api gateway. But here,
    I am not able to get the scopes(that are configured in Cognito App Client settings) in Access Token

  3. I must be in the minority. I cannot get past entering the keys for the new user during ‘amplify configure’. I tried to copy and paste and twice I was told I entered the wrong key values. Is it expected to enter the keys manually rather than copy/paste?

  4. The TS error I’ve yet to overcome? “This expression is not callable.
    Type ‘void’ has no call signatures.” in the SignUpContainer’s call to Form.create(), after I managed to replace the Icon components with @ant-design/icon components.The focus of this post is Cognito, so why complicate implementation with Typescript and (and!) a UI component library. Don’t get me wrong, I’m interested in all three, but my priority is to add auth to my React app, and the bloat doesn’t exactly do wonders for compatability. Going forward, I’ll take the cue to design and validate my own UI, and store tokens locally. All is not lost.

  5. Great tutorial, thank you so much!
    I just wanted to ask you about storing the session jwtToken in local storage – https://github.com/brayoh/react-amplify/blob/master/src/Containers/LoginContainer/index.tsx#L46

    What do you think of using Auth.currentAuthenticatedUser() from the amplify API instead? I am really new to frontend authentication so I don’t know if it is a big deal to store the token in local storage or it would be better to use this call.

    Again, thanks Brayoh, looking forward to your reply 😀

  6. Is it a security problem to create static web app using React and exposing Amplify parameters?
    What is the correct way to create a client side Amplify configuration if I want to deploy my React App in AWS S3?

  7. Great tutorial! But the problem that I have now is how to implement the user session timeout because the refresh token automatically updates the access token every hour. I want to force a log out after 20 minutes of inactivity.

  8. Great! But how would you go about securing your own backend endpoints? Like how to verify against the pool the token sent from client ?

Leave a Reply