angular amplify image

Angular 8 + AWS Amplify Auth

Brandon Twitty

Brandon Twitty

Founder | Solutions Architect

This is a start of blog series and tutorials creating a place for developers to come and the tutorials actually work. So many people are pushing out these "how to" tutorials and they are all over the place. A lot of times they are wrong, missing steps and even worse when the software company of the technology you are trying to use is wrong. As I get time, I will record the hard knock lessons learned from bad documentation or someone shitting together a blog post to get visitors. This post will discuss the 2 day struggle over something so dumb using Angular and Amplify. Send an email if something is incorrect or you found it helpfull OR you want me to buid you something!

The Struggle was real

Developer's jobs have became easier in a sense with all these tech giants allowing us to use their infrastructure, tools and even coding languages. However, like all good things come with a price. I feel like every time I turn on my computer there is a new shiny language, framework, DevOps tool on and on... What makes this difficult for us programmers is all these systems obviously are on their own release trains and feel like they dont pay attention to the dependant frameworks or libraries. Then when something should be simple, it turns into an all day head ache, something that should have been very easy becomes extremely difficult and wastes, sometimes, the entire day. Us poor programmers...

Lets use a simple example like Angular 9. I had started a project last month, not too far in yet and said "eh maybe I should upgrade my CLI and stuff to Angular 9". No, it broke everything so had to revert back to 8. Entire day wasted trying to get Angular 9 to work then half a day reverting. Lets move past that.

So Ive been back to using Angular 8.1.x creating applications no problems (sort of). I then decided to start using AWS Amplify to deploy the Front end and manage some back end resources. Initially had some issues getting it to deploy, but worked through them rather quickly and had a continuous deployment pipeline to AWS Amplify thinking "heck yea this stuff looks pretty cool". With a few key strokes and the amplify cli you can add Authentication, REST APIs, GrphQL APIs, all sorts of neat things, tutorials looked super easy!

NO! it was not easy, I followed the "Getting Started Tutorial" perfectly, Angular would not compile after running the amplify add auth command! Worked just fine before that and same thing happened last time on a much larger project in which I was trying to add this "simple auth library". I didnt have time to mess with it so just went back to Spring Security. I read every bug on Github's Amplify bug section, everyone had a million solutions, "work arounds" which none of them worked for me and plenty others saying "nope that didnt work", literally just hacking it. This tutorial I will show you how to ACTUALLY use Amplify AUTH, Angular 8 and deploy it because apparently they dont want their documentation to be correct. 100s of complaints on their Github you would think they would fix it

Step 1


Just because, I'll start from installing the Amplify CLI

               
    npm install -g @aws-amplify/cli
               
        

This will install the CLI globally hence the -g

Next Configure Amplify

               
    amplify configure
               
            

You will need to sign in to AWS and all that good Stuff, pick a region and if you dont have a user go a head and create a user, I gave Admin Access.

               
    Specify the AWS Region
    ? region:  # Your preferred region
    Specify the username of the new IAM user:
    ? user name:  # User name for Amplify IAM user
    Complete the user creation using the AWS console
               
            

One thing that wasn't clear is you only do this once. If you start another Amplify project this step does not have to be done unless you want to deploy it to a new region or something, Obviously there are some reasons you may want to create another Amplify user. In intellij the right hand bottom will show what User profile you are using. You will get a secret key with the user and you will need that to configure the rest so download it or copy and paste into the set up.

Step 2

Now you have the Amplify CLI set up Globally. Moving right along! nope this is where they leave out very important steps and there is just no way to really trouble shoot if this is wrong. So Amplify Auth does not work with Angular 9 at all, I saw someone said it does but about 100 that says it doesnt, Angular 9 uses IVY compiler and Amplify UI components which are used for AUTH do not. If you dont already install Angular CLI

               
    npm install -g @angular/cli
    ng new myAmplifyProject
    cd myAmplifyProject
               
            

For Angular 6-8 you need to add this to your pollyfill.ts

               
    (window as any).global = window;
    (window as any).process = {
            env: { DEBUG: undefined },
                };
                               
            

Initialize Amplify

               
    amplify init
               
            

Then its going to take you trough a few various steps which I did not get fancy and just followed them

               
 Enter a name for the project (photo-share)

 # All AWS services you provision for your app are grouped into an "environment"
 # A common naming convention is dev, staging, and production
 Enter a name for the environment (dev)

 # Sometimes the CLI will prompt you to edit a file, it will use this editor to open those files.
 Choose your default editor

# Amplify supports JavaScript (Web & React Native), iOS, and Android apps
  Choose the type of app that you're building (javascript)

  what JavaScript framework are you using (angular)

  Source directory path (src)

  Distribution directory path (dist)

  Build command (npm run-script build)

  Start command (ng serve)

  # This is the profile you created with the `amplify configure` command in the introduction step.
  Do you want to use an AWS profile
                               
            

After you are done initializing the project, it will create an aws-export.js which you may need to change it to a Typescript file like aws-expots.ts. That will be located in your src directory and holds the configurations for your AWS resources. This file is auto generated for you. Also, the init adds some stuff to your .gitignore

Next we are going to ruin the Angular build

Inside your project directory install the aws-amplify and amplify ui libraries

               
    npm install aws-amplify @aws-amplify/ui-angular
    ng serve
                               
            

Sweet! navigate to Localhost:4200 and you should see the general Angular screen! Now we just need to add the AWS resource AUTH to be able to quickly add authentication to our app, custom signup forms all using their Incognito service. We are about to build a production ready app in a few key strokes. NO! i wish

Add Authorization

               
    amplify add auth
                               
            

Then deploy it to the cloud, they forget to tell you before you can deploy it you will need to run

               
    amplify add hosting
    amplify push
                               
            

There are few more steps like adding the import module to you app.module.ts

               
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppComponent } from './app.component';

    /* Add Amplify imports */
    import { AmplifyUIAngularModule } from '@aws-amplify/ui-angular';
    import Amplify from 'aws-amplify';
    import awsconfig from './aws-exports';

    /* Configure Amplify resources */
    Amplify.configure(awsconfig);

    @NgModule({
      declarations: [AppComponent],
      imports: [AmplifyUIAngularModule /* Add Amplify module */, BrowserModule],
      providers: [],
      bootstrap: [AppComponent],
    })
    export class AppModule {}
               
            

Now open your app.component.html and add

               

      < amplify-authenticator >
        < div>
          My App
          < amplify-sign-out>< /amplify-sign-out>
        < /div>
      < /amplify-authenticator >
               
            

Now press ng serve and watch the magic not happen. The build will not work and give random errors that do not make sense. On the Github comments they are saying add all these compiler options, switch to e2015 blah blah exhausting. My initial thought by the error probably needed to upgrade my Typescript because it was saying it cannot find Omit in a million places and I think Omit came with 3.5.x. Sweet just upgrade the Typescript we are good. NO. You do have to upgrade the Typescript to 3.5.3, maybe if you are already on 3.5.3 you will not have any problems. If you are on angular 9 I dont think any of this works which is when I originally upgraded Typescript but as mentioned had to revert because Angular 9 broke almost everything even the Smart tables.

After 2 days of messing with compilers, options, turning IVY on, off adding libraries people say fix this issue blah blah even starting over like maybe I missed something. So here is the secret sauce, to utilize Amplify Auth and UI you MUST install very specific Angular Libraries. When you ran npm install -g @angular/cli most likely it installed Angular 9 or if you had Angular already you may be on a different version so run ng --version. I had 8.0.x and Typescript 3.4.x. To finally fix this mess you must run this command

               

      ng update @angular/cli@8.3.17 @angular/core@8.2.13 @angular/compiler-cli@8.2.13
               
            

I also installed this specific version of @angular-devkit/build-angular but not sure if that really fixed anything.

               

      npm install @angular-devkit/build-angular@0.803.25
               
                 

Then uninstall typescript with

               
      npm uninstall typscript
      npm install typscript@3.5.3
               
                 

Conclusion

These new technologies coming out daily, seem very shiny and get me all the time. "Oh I want to use that looks awesome". It has cost me DAYSSSS of development getting stuck in these half baked technologies. Amazon Amplify has also a few other issues that Im not going to get into but all in all pretty cool service. Im going to make a repo for this code so no one else has to go through that pain. Also, in the future I will be creating same type of Tutorials that show the miss steps in the software providers own tutorials that were also very frustrating for technologies like Serverless Framework, Express apps deployed as Lambda Functions, Ionic Framework and some other really cool technologies. They are just struggling keeping the documentation and keeping up with dependency friends.

Copyright 2020 © Code St Louis, All rights reserved