# @frontegg/ng-auth

Latest version **1.3.1** (published 2021-03-07) · 0 weekly downloads

## Install

```sh
npm install @frontegg/ng-auth
pnpm add @frontegg/ng-auth
yarn add @frontegg/ng-auth
bun add @frontegg/ng-auth
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.1 |
| Published | 2021-03-07 |
| First published | 2020-12-08 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 228.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | front-egg |

## Links

- npm: https://www.npmjs.com/package/@frontegg/ng-auth
- npm.io page: https://npm.io/package/@frontegg/ng-auth

## Dependencies (2)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0
- [@frontegg/react-auth](https://npm.io/package/@frontegg/react-auth.md) ^1.25.0

## Recent versions

- 1.3.1 (latest) — 2021-03-07
- 1.3.0 — 2021-02-04
- 1.2.0 — 2021-01-21
- 1.1.1 — 2020-12-09
- 1.1.0 — 2020-12-09
- 1.0.5 — 2020-12-08
- 1.0.4 — 2020-12-08
- 1.0.3 — 2020-12-08
- 1.0.0 — 2020-12-08

## README

<p align="center">  
  <a href="https://www.frontegg.com/" rel="noopener" target="_blank">  
    <img style="margin-top:40px" height="50" src="https://frontegg.com/wp-content/uploads/2020/04/logo_frrontegg.svg" alt="Frontegg logo">  
  </a>  
</p>  
<h1 align="center">Authentication Plugin</h1>  
<div align="center">  

[Angular](https://angular.io/) pre-built Component for faster and simpler integration with Frontegg services.
</div>  
  
## Installation  
Frontegg-Ng-Auth is available as an [npm package](https://www.npmjs.com/package/@frontegg/ng-auth).  
  
```sh  
// using npm  
npm install @frontegg/ng-auth  
  
// using yarn  
yarn add @frontegg/ng-auth  
  
// NOTE: to get the latest stable use @latest.  
```   
## Usage  
  
All you need is to add AuthModule to the ``AppModule``: 
  
```ts
/* app.module.ts file */

import { AppComponent } from "./app.component";
import { CoreModule } from "@frontegg/ng-core";
import { AuthModule } from '@frontegg/ng-auth';

@NgModule({
  declarations: [AppComponent],
  imports: [
    CoreModule.forRoot({
      context: {
        baseUrl: `${window.location.protocol}/${host}`,
        requestCredentials: "include",
      },
    }),
    AuthModule.forRoot()
    // ...rest modules
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

## Auth Components

- [Sso Component](src/lib/sso)
- [Team Management Component](src/lib/team)
- [Mfa Component](src/lib/mfa)
- [Profile Component](src/lib/profile)

## Options and Customizations
**Frontegg-Ng-Auth** provide the ability to fully customize your components 
to align it with your App UI design.

- [`header`](#header-ngcomponent) `<Component>`
- [`backgroundImage`](#backgroundimage-string) `<string>`
- [`backgroundColor`](#backgroundcolor-csscolor) `<CSSColor>`
- [`loaderComponent`](#loadercomponent-ngcomponent) `<Component>`
- [`routes`](#routes-string) `<string[]>`

**Advanced Customizations**

- [`Login Component`](src/login/README.md)

### `header <Component>`

*(optional)* The Ng Component is used to customize your authentication page header
```ts
{
  imports: [
   AuthPlugin.forRoot({
    header: MyAuthPageHeader,
    // ...rest options
   })
  ]
}
```

### `backgroundImage <string>`

*(optional)* The CSS Color is used to for authentication page background color
```ts
{
  imports: [
   AuthPlugin.forRoot({
    backgroundImage: 'https://image_url' | 'data:image/png;base64,...',  
    // ...rest options
   })
  ]
}
```

### `backgroundColor <CSSColor>`

*(optional)* The CSS Color is used to for authentication page background color
```ts
{
  imports: [
   AuthPlugin.forRoot({
    backgroundColor: '#FAFAFA' | 'red' | 'rgb(200,200,200)',
    // ...rest options
   })
  ]
}
```

### `loaderComponent <Component>`

*(optional)* The Ng Component displayed on first load while resolving the verifying the authenticated user, refreshing the token, 
and to check if the user should be redirected to the login page. 
```ts
{
  imports: [
   AuthPlugin.forRoot({
    loaderComponent: <MyLoaderComponent>,  
    // ...rest options
   })
  ]
}
```

### `routes <string[]>`

*(optional)* The path routes for the Authentication Components, these pathes are used to redirect
an user to a specific route depends on the authentication state. 
```ts
{
  imports: [
    AuthPlugin.forRoot({
      routes: {
        /**
         * redirect to the page when a user is authenticated 
         */
        authenticatedUrl: '/',
        /**
         * redirect to the page when a user is not authenticated 
         */      
        loginUrl: '/account/login',
        /**
         * when navigating to this url, AuthProvider will logout and remove cookies 
         */
        logoutUrl: '/account/logout',
        /**
         * redirect to the page when a user wants to activate their account 
         */
        activateUrl: '/account/activate',
        /**
         * redirect to the page when a user forgot his account password 
         */
        forgetPasswordUrl: '/account/forgot/password',
        /**
         * redirect to the page when a user is redirected from the forgot password url 
         */
        resetPasswordUrl: '/account/reset/password',
      },  
      //...rest options
    })
  ];
}
```

## Contributing

The main purpose of this repository is to continue developing Frontegg Angular to making it faster and easier to use.
Read our [contributing guide](/CONTRIBUTING.md) to learn about our development process.

**Notice** that contributions go far beyond pull requests and commits.

## License

This project is licensed under the terms of the [MIT license](/LICENSE).

---
_Source: https://npm.io/package/@frontegg/ng-auth · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._