From 22d2fac4a6487679271f69ea2d812bfc3731a02a Mon Sep 17 00:00:00 2001 From: Andy Hopper Date: Sat, 11 Apr 2020 09:37:30 -0400 Subject: [PATCH] Updated to use the new Angular UI module. --- README.md | 21 ++++++++------------- 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index a82f723..46d6b70 100755 --- a/README.md +++ b/README.md @@ -82,7 +82,7 @@ window.global = window; Let's now install the AWS Amplify & AWS Amplify Angular libraries: ```bash -npm install --save aws-amplify aws-amplify-angular +npm install --save @aws-amplify/auth @aws-amplify/api @aws-amplify/ui-angular ``` ### Installing the AWS Amplify CLI @@ -191,22 +191,16 @@ Now, our app is ready to start using our AWS services. Add the Amplify Module and Service to `src/app/app.module.ts`: ```js -import { AmplifyAngularModule, AmplifyService } from 'aws-amplify-angular'; +import { AmplifyUIAngularModule } from '@aws-amplify/ui-angular'; @NgModule({ imports: [ - AmplifyAngularModule + AmplifyUIAngularModule ], - providers: [ - AmplifyService - ] + providers: [] }); ``` -### Using Amplify Service - -The `AmplifyService` provides access to AWS Amplify core categories via Dependency Injection: auth, analytics, storage, api, cache, pubsub; and authentication state via Observables. - ### Using the Authenticator Component AWS Amplify provides UI components that you can use in your App. Let's add these components to the project @@ -243,12 +237,13 @@ amplify console auth We can access the user's info now that they are signed in by calling `currentAuthenticatedUser()` which returns a Promise. ```js -import { AmplifyService } from 'aws-amplify-angular'; +import { Component } from '@angular/core'; +import Auth from '@aws-amplify/auth'; @Component(...) export class AppComponent { constructor(public amplify: AmplifyService) { - amplify.auth().currentAuthenticatedUser().then(console.log) + Auth.currentAuthenticatedUser().then(console.log) } } ``` @@ -280,7 +275,7 @@ To do this, we could create a form like: We'd also need to have a method that signed up & signed in users. We can us the Auth class to do this. The Auth class has over 30 methods including things like `signUp`, `signIn`, `confirmSignUp`, `confirmSignIn`, & `forgotPassword`. These functions return a promise so they need to be handled asynchronously. ```js -import { Auth } from 'aws-amplify'; +import Auth from '@aws-amplify/auth'; export class SignupComponent implements OnInit { public signup: FormGroup;