Sign In and Out Users using AWS Amplify's Auth
To get the data of a user that is signed in, we are going to use Auth from AWS Amplify. Auth allows us to do a number of things such as get the currentAuthenticatedUser and give the ability of our users to signOut.
Instructor: [0:00] Now that users have the ability to sign in, we want to get information about the current signed-in user in our app. First, I'll import useState and useEffect from React. I'll add a useEffect. Inside the useEffect, I'll create an asynchronous function. I'll call it below. I'll add a try-catch block.
[0:34] I'll import auth from the AWS Amplify libraries. Then, I'll set my user to the current authenticated user. I'll use useDate in order to store that user. The user will be undefined to start out with. Now, I'll update that user with the user that I got with the auth library. This catch will fire if there's no current signed-in user. We'll also console.log a warning.
[1:05] We currently have this sign-in link. We want to make it so that a signed-in user sees a Sign-out button instead of the sign-in link. I'll create a ternary operator that checks to see if there's a user. If there is, the link will render.
[1:19] Otherwise, we'll create a button that allows a user to sign out. We'll add a click event to the button. We'll make this function asynchronous and await the user to sign out. We'll add a second line to the function and reset the user in state to none.
[1:45] I'll close my ternary operator. Now I'll test this out in my browser. I'm currently signed in, so I see a Sign-out button. Once I click the Sign-out button, the Sign-in button appears.
[1:55] I've implemented a function that fetches the current authenticated user and then conditionally rendered information based off of that.