2022-05-26
3788
#aws#react
Brian Njenga
13831
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:

Vue.js logo over a dark, textured purple background. The article discusses using defineExpose and in Vue 3 to enhance component interaction and enable dynamic theming.

defineExpose and <style vars> in Vue 3 for component interaction and theming

Simplify component interaction and dynamic theming in Vue 3 with defineExpose and for better control and flexibility.

Clara Ekekenta
Nov 7, 2024 ⋅ 8 min read
How to set up TypeScript with Node.js and Express

How to set up TypeScript with Node.js and Express

Explore how to integrate TypeScript into a Node.js and Express application, leveraging ts-node, nodemon, and TypeScript path aliases.

Aman Mittal
Nov 7, 2024 ⋅ 10 min read
Cover image for es-toolkit, a Lodash alternative

es-toolkit, a Lodash alternative

es-toolkit is a lightweight, efficient JavaScript utility library, ideal as a modern Lodash alternative for smaller bundles.

Rishi Purwar
Nov 6, 2024 ⋅ 5 min read
JS Logo Over Blue Background

The ResizeObserver API: A tutorial with examples

The use cases for the ResizeObserver API may not be immediately obvious, so let’s take a look at a few practical examples.

Kevin Drum
Nov 5, 2024 ⋅ 9 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