AWS Amplify + Angular full stack serverless guide: Part 3

This is the third article of my series on AWS Amplify with Angular full-stack serverless guide. In the previous articles, I explained how to set up an Amplify with Angular project and how to make continuous deployment of that app.

1. AWS Amplify + Angular full-stack serverless guide: Part 1: Setting up ⚙️ 🔧 an Amplify with Angular app
2. AWS Amplify + Angular fullstack serverless guide: Part 2 Continuous Deployment 🔄 ✅ of an Amplify app

In this article, I will describe how to add authentication to the app. Amplify framework uses Amazon Cognito as the principal authentication provider. I will be discussing how to add username/password login as well as social login. Let’s do this 👊

As the article is being drafted, I thought that it’s getting a bit lengthy. So I decided to bring a conventional sign-in/sign-up tutorial in another article. In this article, I will be explaining how to configure Social-Sign-In with Amplify and Angular.

If you are adding social login to an Amplify app, you have to configure it first. Then you can add conventional sign-in/sign-up flow.

Social Sign-In

Before start configuring our app, we need to set up the Auth provider.

— Google Sign-In

First go to Google developer console.

Click on the downside pointer to create a new project.

Click on NEW PROJECT to create a new project.

Give a name to your project and click CREATE. Then a Project will be created on Google Developer Console.

Now select the created Project.

Go to OAuth consent screen. Then you have to allow any user with a Google Account to log in to the application.

Then click on CREATE. In the next step, you will be adding the product details of your app in order to show the users on the consent screen while they try to login through google. Here, I will just give a name to the application and click SAVE.

Now click on Credentials and CREATE CREDENTIALS and select OAuth client id from the dropdown list.

On the next page, select the Application type as Web application and click Create.

Now, a client id and a client secret will be created. These values will be used to connect our application with Google. Authorized JavaScript origins and Authorised redirect URIs will be added later once we configure our application.

Now let’s go back to our app, we have to add the authentication service. To do this, run the following command from the root of the application.

amplify add auth

Select Default configuration with Social Provider (Federation) from the first selection.

Then you will be asked to chose how users need to be signed in. I choose username method. Then you will be asked whether you want additional configs to be included. Here I will not be using them. Then you will be asked Enter your redirect signin URI:. Here you have to mention the url that the user should be redirected when they are successfully logged in. This is useful for social login. As I am working on my test environment, I will be using localhost:4200/ as my redirect sign-in url.

Then it will ask for more redirect sign in URLs? Do you want to add another redirect signin URI (y/N) n I give no for this. Then it will ask for the sign out redirect url. I will give localhost:4200/. Within the app itself, I will be creating Auth Guards in order to redirect unauthenticated routes. Then it will ask for Select the social providers you want to configure for your user pool: Here, as we have already configured Google, I choose Google.

Pro Tip: We have been configuring auth for test backend environment. But we need to add these configurations for other backend environments as well. To do that, you simply have to change the current environment by amplify env checkout <env-name> . This will merge all the changes you did to the current environment to the required environment. Basically, here the auth configs will be added to the required environment.

As this issue mentions, there is an issue with the Amplify CLI, where we can’t add different redirect sign-in/sign-out urls for different environments. What I did instead was, amplify auth update and I changed the redirect sign-in/sign-out urls as I wanted to be in the required environment and amplify push to update the changes to the cloud.

Now it asks for the Enter your Google Web Client ID for your OAuth flow: we have to provide the generated client id from Google.

Then it asks for the Enter your Google Web Client Secret for your OAuth flow: . Here also, we have to provide the generated client secret from Google.

You can find them in the Google Developer Console under Credentials. Now you have successfully configured authentication in your local test environment. We have to push our local changes to the cloud. Then we have to use,

amplify push

Once the process is finished, you have to copy the generated Hosted UI link. Then go back to the Google Developer Console. Go to Credentials. Select the previously created OAuth Client Id.

Now you need to add the copied link to Authorized JavaScript origins. To Authorized redirect URI, you should add /oauth2/idpresponse to the end of the link you copied. Click Save.

Optional: If you do want further attributes such as profile picture to be recieved from the social provider, go to Amplify console. Go to Backend environments. Select the environment and go to Authentication. There you will see Cognito User Pool and click on it and go to the user pool. Select Attribute mapping under Federation. There you will be able o enable the required attributes.

Now we have configured our backend for Google Sign-In. Then we have to set up frontend to facilitate Google Sign-In.

First, let’s create a component named auth in our app. I will be adding all the auth related components within this component.

ng g c auth

Then add the login component inside the auth component.

ng g c auth/login

Add this to your login.component.ts.

Now go to the login.component.ts and add the following function.

googleSignIn(){    
     Auth.federatedSignIn({customProvider: 'Google'})  
}

What will happen from this function is that, whenever the Google sign-in button is clicked, Amplify Auth service will redirect the user to Google sign-in consent screen and as we have configured Google sign-in in the Google Developer Console, once the user is authenticated, the user will be redirected to the redirect sign-in URL that we mentioned using the Amplify CLI.

Let’s create another component, named home where the users are redirected in a successful sign-in.

ng g c home

Now let’s create Auth Guard in order to check whether the particular routes can be redirected.

ng g g guard/auth

Now let’s add some content to home.component.html. I will be adding a simple MDBoostrap nav bar, which will contain the name of the logged-in user, profile pic, and the log out button.

In the home.component.ts add the following.

Here, Auth.currentAuthenticatedUser() willreturen the currently logged in user.

Finally, let’s update the app-routing.module.ts in order to add new routes of the components we created and to secure the /home route.

Now launch the application.

ng s

Here, a simple demo of what we have done so far is shown.

In the next article, I will be bringing how to set up a conventional sign-up/sign-in workflow in Amplify. Until then stay safe and happy coding 💛

👋 Join FAUN today and receive similar stories each week in your inbox! ️ Get your weekly dose of the must-read tech stories, news, and tutorials.

Follow us on Twitter 🐦 and Facebook 👥 and Instagram 📷 and join our Facebook and Linkedin Groups 💬

If this post was helpful, please click the clap 👏 button below a few times to show your support for the author! ⬇