Skip to content

Updated to use the new Angular UI module. #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Updated to use the new Angular UI module. #2

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 8 additions & 13 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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)
}
}
```
Expand Down Expand Up @@ -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;
Expand Down