# Building a SaaS Product (2)

In my [prvevious post](https://blog.phillipninan.com/building-a-saas-product-1-setting-up-the-project-angular-expressjs) we put together a starter project for a SaaS product. Today, I am going to show you how to add Authentication to an [Angular](https://angular.io) project by using [AWS Amplify](https://aws.amazon.com/amplify/). This requires you to have an [AWS account](https://portal.aws.amazon.com/billing/signup?redirect_url=https%3A%2F%2Faws.amazon.com%2Fregistration-confirmation#/start) and may incur small charges to get this working. 

🐦 Follow me on [Twitter](https://twitter.com/ninan_phillip) to see all vital content! 🐦

** TLDL**: Here is the code in my [GitHub](https://github.com/fourgates/blog-saas-starter/tree/feature/amplify-auth). Here is a look at my [pull-request](https://github.com/fourgates/blog-saas-starter/pull/1) with the necessary changes.

## Prerequisite 
1. Follow these [instructions](https://docs.amplify.aws/start/getting-started/installation/q/integration/angular#option-1-watch-the-video-guide) on how to install and configure the Amplify CLI. 

2. Checkout my starter project on [GitHub](https://github.com/fourgates/blog-saas-starter/tree/feature/step-1-setting-up). Make sure you start on the `feature/step-1-setting-up` branch!

## Initialize Amplify
1. Run the following code in the `webapp` folder. This will initialize an amplify project in our Angular project. You will then configure authentication. Finally, we will push these changes to AWS. You will be asked to login to your AWS account.
```
amplify init 
# make sure you store your keys for the new user!
amplify configure
amplify add auth
amplify push
```

2. Install the UI using NPM.
```
npm install aws-amplify @aws-amplify/ui-angular
```

## Update Angular
1. Update app.module with this new code. We need to add imports for the AWS packages.
```
import Amplify, { Auth } from 'aws-amplify';
import {AmplifyUIAngularModule} from "@aws-amplify/ui-angular";
import awsconfig from './aws-exports'; 
Amplify.configure(awsconfig);
...
  imports: [
     ...,
    AmplifyUIAngularModule
  ],
```

4. AWS Amplify requires a global variable to be accessible. Add this to the top of the file `src/polyfill.ts`
```
(window as any).global = window;
(window as any).process = {
  env: { DEBUG: undefined },
};
```

5. Replace all the template code in `app.component.html` with this
```
<amplify-authenticator>
  <div>
    My App
    <amplify-sign-out></amplify-sign-out>
  </div>
</amplify-authenticator>
```

6. Use a git ignore for `amplify/team-provider-info.json`. The file has sensitive info you don't want in source control!

That's it! You should be able to run `ng serve` and be greeted with a login screen. 

If you simply want to pull my git repo you will need to delete the `amplify` folder and run the following commands:

```
amplify init 
# make sure you store your keys for the new user!
amplify configure
amplify add auth
amplify push
```

Here is the code in my [GitHub](https://github.com/fourgates/blog-saas-starter/tree/feature/amplify-auth). Here is a look at my [pull-request](https://github.com/fourgates/blog-saas-starter/pull/1) with the necessary changes.

🐦 Follow me on [Twitter](https://twitter.com/ninan_phillip) to see all vital content! 🐦

Here are some screenshots from my setup:
![amp-init.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614056046403/LdznHEeWA.png)
![amp add auth.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614056058831/5OeA6f1bJ.png)
![amplify-push.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614056073391/d-eiu1XFD.png)

## Resource
- [Sharing Amplify Projects](https://docs.amplify.aws/cli/teams/shared#sharing-projects-within-the-team)