AWS: Cognito Hosted UI Login with Amplify in Angular 7
Amplify is the official js library from AWS which supports Cognito. Let's get started with a simple Angular project which uses hosted UI for Authentication and Authorization.
This series is split into sub-modules.
- Cognito Hosted UI with Amplify in Angular 7
- Configuring Cognito User pool + Federated Identity (Okta)
- Resource Server with Cognito
- Deploying your AngularApp in Cloudfront with SSL
Download:
Please fork the complete project from my Github.
Angular 7 App
Below is the project structure.
Setting up bootstrap in Angular 7
- Install the below modules in angular (including ngx-spinner)
npm install -save bootstrap
npm install -save popper.js
npm install --save jquerynpm install -save ngx-spinner
2. Include the .css and .js in angular.json
3. Run the project using the below command. If everything goes well, you should have bootstrap installed in your project.
npm serve -o
Setting up Amplify in Angular
- Install
aws-amplify
andaws-amplify-angular
npm packages into your Angular app.
$ npm install aws-amplify aws-amplify-angular
2. Add the following to your polyfills.ts
(window as any).global = window;
(window as any).process = {
env: { DEBUG: undefined },
};
3. Update your src/tsconfig.app.json
:
"compilerOptions": {
"types" : ["node"]
}
Configuring Amplify in Angular
- Create a
aws-exports.js
file inside/src
.
2. Import the configuration file and load it in main.ts
3. Include Amplify in app.modules.ts
.
We have configured amplify in our Angular App.
Using Amplify
- We will create the UI elements.
- Login Page
- Dashboard Page
- Navbar
ng g component pages/login --no-specng g component pages/dashboard --no-specng g component components/nav-bar --no-spec
a. Login Page
pages/login.component.html
pages/login.component.ts
Note: We have set custom provider(okta) in federatedSign().
b. Dashboard Page
pages/dashboard.component.html
pages/dashboard.component.ts
c. Navbar Component
components/nav-bar.component.html
components/nav-bar.component.ts
Note:
Auth.signOut(), calls the logout URL of Cognito. You can check that in the browser, network calls.
2. Now we will create the interceptors.
a. JWT Interceptor
Note:
from(Auth.currentSession()) // Promise --> Observable
b. Error Interceptor
c. Interceptor Provider
3. Create Auth Guard & Routing
- app-routing-module.ts
- auth.gaurd.ts
4. We will create services
- services/rest-api/rest-api.service.ts
- services/dashboard/dashboard.service.ts
5. Setting environment properties
Note: Amplify receives 3 tokens from Cognito
- Refresh Token (Used to get a new Access Token, upon expiry)
- Identity Token (Used in your frontend, for showing the Name, Email etc)
- Access Token (Sent to resource server along with Request)
Access Token expiry is set to 1 hour by default.
We can set the expiry fo Refresh token in Cognito Settings
Amplify uses the refresh token, and automatically renews your Acess Token.
We have now completed the usage of Amplify in Angular App. In the next series, I will walk you through AWS Cognito configuration.
Found it Interesting?
Please show your support by 👏.