tj-auth v0.0.0-watch

Tj-Auth

A multi-provider authentication library

This an Angular library that facilitates setting configuration options for multiple providers at once and allows user login to any of the providers at the click of a button. i.e User can login with either Google, Microsoft, Keycloak etc..

The library uses the OpenID Connect Flow.

Author

👤 Thywill Joshua thywilljoshua@gmail.com

• Github: @thywilljoshua

Contributors

👤 Nicola Vurchio

• Github: @nicolavurchio-iad2

Usage

Only 5 Steps

• Install the library
• Import the library and Inject to the app.component.ts
• Set the providers configuration options in the enviorunment file
• Pass the configuration options to the library
• Use the apis  

1. Install the library

npm install tj-auth

2. Import TJAuthModule to app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

//HERE
import { TjAuthModule } from 'tj-auth';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    TjAuthModule, //HERE
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

3. In the enviorument file:

Get the configuration options from the provider and add them using the "IAuthProviderOptions" interface from tj-auth

import { IAuthProviderOptions } from 'tj-auth';

export const authConfig: IAuthProviderOptions = {
  providers: {},
};

export const PROVIDERS = {
  GOOGLE: 'google',
  MICROSOFT: 'microsoft',
};

//Add each provider option to the providers object
//You can add more providers following this format
authConfig.providers[PROVIDERS.GOOGLE] = {
  name: PROVIDERS.GOOGLE,
  authorization_endpoint: 'https://accounts.google.com/o/oauth2/auth',
  token_endpoint: 'https://oauth2.googleapis.com/token',
  current_user_endpoint: `https://www.googleapis.com/oauth2/v3/userinfo`,
  client_id: 'xxxxxxxx.apps.googleusercontent.com',
  requested_scopes: 'profile email openid',
  redirect_uri: 'http://localhost:4200/redirect',
  end_session_endpoint: '',
  redirect_logout_uri: 'http://localhost:4200',
  access_type: 'offline',
  client_secret: 'xxxxxxxx',
  response_type: 'code',
};

4. Create an Auth Service:

i. Inject TjAuthService to the AuthService

i. Inject AuthService to app.component.ts

  Pass the configuration options to the library in the constructor, get and use the public apis  

import { TjAuthService } from 'tj-auth';
import { PROVIDERS } from '../../environments/environment.prod';
import { authConfig } from '../../environments/environment.prod';

@Injectable({
  providedIn: 'root',
})
export class AuthService {
//Inject TjAuthService from the library

  constructor(private tjAuthService: TjAuthService) {
  //Pass the provider options to the library
    this.tjAuthService.setConfigOptions(authConfig);
  }

  loginWithGoogle() {
    this.tjAuthService.login(PROVIDERS.GOOGLE); //Recieves the provider name
  }

  loginWithMicrosoft() {
    this.tjAuthService.login(PROVIDERS.MICROSOFT);
  }

  logout() {
    this.tjAuthService.logout();
  }
}

import { Component } from '@angular/core';
import { AuthService } from './services/auth/auth.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

export class AppComponent {
//Inject AuthService to app.component.ts
  constructor(private auth: AuthService) {}
}

5. APIs

  | API | Purpose | | ------ | ------ | | setConfigOptions(configOptions: IAuthProviderOptions) | Recieves the cofiguration options and makes it available to the library | | login(providerName: string) | Recieves the name of a provider and initiates the login process | | logout() | Clears all user information and sets isAuthed$ to false | | userManager.configs | Configuration options object the library recieves| | userManager.user | The user object gotten from the provider after authentication | | userManager.tokens | Token information i.e Access Token, Refresh Token, Expiry Date etc | | userManager.isAuthed$ | An Observable that returns true if user is authenticated and false otherwise| | userManager.isAuthed$ | An Observable that returns true if user is authenticated and false otherwise|

An auth guard is also provided to protect routes if user is not authenticated: import { TjAuthGuard } from 'tj-auth';

if the user is not authenticated it navigates to "/login" page

This library is in beta mode, use on small and simple projects.