In our previous blog post, we tackled app presentation and how to use CoreUI to add an admin template to your app. At this point, you should have a strong app architecture, but as we all well know a chain is only as strong as its weakest link, which in this case refers to your app security vulnerabilities. Authentication and authorization problems are consistently ranked amongst the top three most critical security risks to web applications in the OWASP Top 10, thus to mitigate these risks we’ll be guiding you through the process of adding backend and frontend authentication to your application.
Before we can tackle authentication, we first need to create a new branch and environment where changes can safely be made. In your project folder, type the following command:
This command will create a new git branch called feature/auth and switch context to that branch. Next we’ll create a new AWS environment where we can add and configure the backend authentication. Type the following command in the project root:
At this point, you’ll be asked to answer a few questions. Simply copy the answers below and Amplify will start doing its magic to create the necessary CloudFormation code to build our new app environment.
Q: Do you want to use an existing AWS environment (Y/N)?
A: No. (We want to create a new environment where we can add and update cloud services without affecting our current working environment.
Q: Enter a name for the environment
Q: Do you want to use an AWS profile?
A: Yes. (We’ll use the profile created in the configuration step).
Q: Please choose the profile you want to use
We’ll be using AWS Cognito to add the authentication service to our app. We’ll be running the following command to add the authentication service to our new environment:
The command will trigger a set of configuration questions:
Q: How do you want users to be able to sign in
Q: Do you want to configure advanced settings?
A: No, I am done. (For the time being we’ll just be going with the basic username option).
If you’re still up to speed, running the amplify status will display the following:
Amplify has added a folder (amplify/backend/auth/) to our project to keep the backend auth configuration settings. For the moment this is only a local change. Lets commit the changes to git and push the auth service into the cloud.
When asked if you want to continue, answer “yes” as this will push the changes through to AWS.
To integrate the frontend let’s install the aws-amplify and aws-amplify-angular packages. Aws-amplify is the AWS Amplify core library, while Aws-amplify-angular is one of the AWS Amplify library packages which provides building blocks for Angular App development.
If you are using an Angular 6+ version add the following code to the polofill.ts file.
Add “node” as a type to the compilerOptions.
When adding the backend authentication service using AWS Cognito, Amplify creates a file called aws-exports.js in the src directory. This file contains all the configuration needed for your angular app to connect to the AWS Cognito service. To implement this in your application add the following to your main.ts file:
At this point we’ve configured Amplify and can use it in the rest of our Angular application. Add the following to include Amplify in the application:
In the previous segment there were two views included when we added CodeUI to our application, login and register views. Building on these views, we’ll register a new user first.
Let’s create two components here to handle the registration flow; one component for registering and one for confirming the registration. AWS Cognito has built-in functionality for registering and confirming the account with a confirmation code, which is automatically sent to the account’s email address. To create the register form component, execute the following command in the root of the project:
This will create a register form component at src/app/components/register-form.
Copy the following code into src/app/components/register-form/register-form.component.ts:
That takes care of the component. Add the below code to the src/app/components/register-form/register-form.component.html:
This takes care of the view which contains a form with three fields (username, password, confirmPassword). We’ll be using an email for the username and pass that to AWS Cognito as the username and email for the new user.
Create the confirm form component by executing the following command in the root of the project.
This will create a confirm form component at src/app/components/confirm-form.
Copy the following code into src/app/components/confirm-form/confirm-form.component.ts:
That takes care of the confirm form component code. Add the below code to the src/app/components/register-form/register-form.component.html:
This takes care of the confirm form view which contains a form with two fields (email, confirmation_code). The email will be returned from the registration code as part of the AWS Cognito signup response. The confirmation code, which is sent on signup, will need to be entered in the form in order to confirm the registration.We need to update the register view which was added to our application in the CodeUI step. Override the register component with the following code:
At this point we’ve registered a user and confirmed the registration. The next thing we need to do is to hook up the login form to make use of AWS Cognito to authenticate the newly registered user.
To create the login form component, execute the following command in the root of the project:
This will create a login form component at src/app/components/login-form.
Copy the following code into src/app/components/login-form/login-form.component.ts
Add the following code to the login form component’s html file to create the view for the component.
Now we want to make user of this component within the Login View which exists inside the CodeUI files we added. To do this we need to override the Login View as below:
Run the following command to add all the new files added during this topic and commit it to your git repository:
Now we want to merge the code into our develop branch to bring all the authentication updates into our develop branch:
Checkout the Amplify dev environment:
Run amplify status to see the status of the current environment:
At this point, you should be able to see the following:
Run the following command to deploy the changes to the dev environment:
When asked if you are sure that you want to continue, answer “yes”. After this step, we’ll remove the resources from the feature branch by running the following command:
After following the steps outlined above, we can go ahead and test our app authentication features.
Enter your email address and password in the register form.
Successful registration will trigger an email containing the confirmation code:
Once you’ve confirmed your account registration you can login to the application. At the login screen, enter your email in the username field and enter your password.
If you followed the steps correctly, successful login will direct you to the CoreUI dashboard.
After adding backend and frontend authentication to your Angular application, there will still be a bit of work left such as handling incorrect login credentials and hooking up forgotten passwords, but the essential architecture will be in place. Keep an eye on our social media accounts or sign up for the Swipe iX newsletter to stay up to date with our latest tutorials, as we’ll be walking you through the process of guarding your application next. If you have any questions, get in touch, but for now we’ve concluded this tutorial on how to sign up and sign in, so for now - we’re signing out.