amplify auth turorial - for angular - not complete and erroring.

[jpmyob]

Page: /start/getting-started/auth/q/integration/angular

Feedback:

I think your auth tutorial for angular is missing steps.

#1) the create auth -
for me, amplify push results in error.
Following resources failed
Resource Name: UpdateRolesWithIDPFunction (AWS::Lambda::Function)
Event Type: create
Reason: The runtime parameter of nodejs8.10 is no longer supported for creating or updating AWS Lambda functions. We recommend you use the new runtime (nodejs12.x) while creating or updating functions. (Service: AWSLambdaInternal; Status Code: 400; Error Code: InvalidParameterValueException; Request ID: 5eadfda3-6511-42c9-bc0f-72a8fc99746e; Proxy: null)

Indeed the amplify/auth/*yaml has auto generated a reference to nodejs8.10...
changing it by hand to nodejs12.x in the file and re-running amplify push does not fix issue.

I assume I'll find a fix for the above - moving on to the next step

#2) create UI
your text make reference to aws-exports.js
"Amplify Framework has an authentication UI component we can use that will provide the entire authentication flow for us, using our configuration specified in our aws-exports.js file."
my aws-exports.js has no reference, and no text explaing what to set or how to set it is made...
the example jumps into "add this code to component.html" and you're done...

your tutorial reads...
"Add the amplify-authenticator component to the top of src/app/app.component.html"

following - I do so - and if I didn't notice the comment in the code to place previous code I wouldnt have.

#3) "In this example, you used the Amplify Angular UI library and the amplify-authenticator component to quickly get up and running with a real-world authentication flow."

Did we? I dont recall installing amplify-authenticator?? were we supposed to? it is only mentioned here at the end...

you need to have someone who has NEVER done amplify - review your tutorials step by step.
I still cant get auth working - following your tutorial step by step.

[nickarocho]

Hi @jpmyob I'm sorry to hear you had issues going through our Angular Getting Started tutorial.

I've never been through it myself, so to better understand your problems, I spent the better part of yesterday walking through it with fresh eyes. While I did manage to get my app up and running successfully - complete with adding the Amplify API and Auth categories - I also ran into a handful of Typescript errors and dependency-related roadblocks which aren't fully detailed in our documentation and could be understandably frustrating - especially from a beginner's perspective, like you mentioned.

I'm going to work with the team to make this a better overall experience, so thank you for your patience while we break it down and find those areas of improvement.

---

In specific regard to the problems you ran into, I'd like to address some questions that occur to me as I read through your issue:

1. for me, amplify push results in error... Reason: The runtime parameter of nodejs8.10 is no longer supported for creating or updating AWS Lambda functions. We recommend you use the new runtime (nodejs12.x)

Can you verify which version of Node you are running on your machine by running node -v in your terminal? It looks like you might be working with a very outdated version which will most likely cause some serious problems under the hood when trying to scaffold your app via amplify init and therefore amplify push.

In addition, could you please supply me with the contents of your package.json in the root of your app? This will help me better understand the configuration you are working with and might expose some other issues.

2. my aws-exports.js has no reference, and no text explaing what to set or how to set it is made...

A successful run of the amplify push command is what will populate the aws-exports.js file with the proper configuration (i.e. the necessary values in regards to any feature added via amplify add X, like amplify add auth or amplify add api.

However, as you've noted from the first problem - amplify push is resulting in an error and not able to successfully populate this file. So unfortunately you can't move on to the next step of the tutorial until the first issue is resolved.

3. I dont recall installing amplify-authenticator?? were we supposed to? it is only mentioned here at the end...

You are correct that we never explicitly install this specific component, however it is made available to the entire app via this line in the src/app/app.module.ts file:

import { AmplifyUIAngularModule } from '@aws-amplify/ui-angular';

It is injected via the @NgModule directive declared later in the file as provided in the tutorial.

---

In summary, I would suggest:

1. Upgrading your local node version the latest stable version (I'm on 14.17.0 right now)
2. Starting with a fresh project, go through the existing tutorial carefully without skipping any steps (which I agree, some can be easy to miss if you are skimming - happened to me twice 😅)
3. Reaching out to the community (Discord, GH) if you still get stuck.
4. It is very possible you will run across some TypeScript issues since Angular 12 is more strict with typing. Let us know if you do and we can provide support.

Hope this helps!

[wlee221]

Hello, I'll go ahead and close this issue as the solution @nickarocho provided addresses the problems mentioned in this comment. Please let us know if you still face the configuration problem.