From the course: Complete Guide to Serverless Web App Development on AWS

Solution: Add Login and log out functionality - Amazon Web Services (AWS) Tutorial

From the course: Complete Guide to Serverless Web App Development on AWS

Start my 1-month free trial Buy for my team

Solution: Add Login and log out functionality

“

(upbeat music) - [Instructor] Let's take a look at how I solve this problem. So you need to go to your API definition. So if you go to services API, and here what we need to do is to implement this login user. So let's do it. I will bring the code so I can show you how it's done. So this is the code. Let's import everything. Here are the three APIs that we need in order to create that object. So you can see that first we are going to sign in the user and if that works, then we are going to fetch the session and we are going to get the current user. So with the current user, we'll get the user ID, the username, and any sign in details like the name. And with the "auth" session, we are getting the token that we will need in order to do the calls to the APIs. We don't need it yet, but we'll need it in the next section. So in order to test this locally, basically, we're going to run the server, so we can do "clear" and then "npm run dev". So now we open this in our browser and here we can try to log in with one of the users that we created previously. So we can try to log in and see what happens. So let's see if this works. Well, yeah, it works. Remember that the back end is not yet working, so there is a lot of errors here, but that's okay. We know that the back end is not working, but it logged in, so that's good. We can try, now we're kind of stuck. One thing I would recommend you when you're doing this test is that you clean the application session storage because when we go to the server, things will get bagged. We'll think that there is a user already logged in and because this is not working, things will not move forward for you. So just clean the local storage and the session storage for this application and you can even try it again because now you're logged out. And next, let's deploy this into the cloud and see how it works there. Let's go back to the code. So here we are and now we are going to commit this, that is implemented. Let's commit it. "git commit" "adding loging functionality" and then the push, "git push origin main". Boom. Now this should go to GitHub. So here we should see now three commits, and in Amplify, we should see that a new deploying is happening. Now when this deploy finish, we should be able to do exactly the same in the cloud. So let's wait for this and let's try it. One thing you can do is while you wait for the deployment to happen is to explore a little bit the Amplify. So now that we have been clicking around, you can see something in your metrics, so this is kind of nice. You can see that there has been some requests, not many because we have been trying, there has been some data transfer, there have been some errors because we have had some errors with the logins and not having the APIs and things like that. And here you can see some information, so you can explore that. You can make these two auto refresh. So it keeps on refreshing while you're testing, for example. And you can explore here some of the definitions of what each of these boxes means. So let's see if our application is deployed. Oh, it's not yet deployed. It should be deployed soon. So let's wait for it and then we can refresh and try it. Let's close that. Let's close that. Good. It's built. Now it's deploying. Great. Let's open it and now we can log in. Again, we can use one of the users that we have created previously that are already in our Cognito user pool and this should log in. Great, let's remove everything from our session and local storage so we don't have anything here and we can test it later on. Great, let's now implement that API. But before that, let's recap everything we have been working so far.

Contents