Github Authentication library for Angular 6
This library is a authentication library for Github signin, and the main objective is to make it as easy as possible.
The plugin dynamically creates a route that handles the callbacks from github and parses the token, as well as providing you with a store for the tokens.
You can also provide templates for login, logout and loading, see examples below.
The library provides one module GithubAuthLibModule, that includes on component
Login and one service
GithubAuthService.
The login compenent's selector is an attribute selector and is [ga-login]
The library has two peer dependencies that you have to install, "ngx-store": "^2.0.0", to install them simply run these commands at the root of your angular repo.
npm install ngx-store
You should also setup AppRoutingModule in your root module since the library uses routing.
Using the library is quite strait forward. Lets start by looking at how to register the module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { GithubAuthLibModule } from 'github-auth-lib';
import { SuccessComponent } from './success/success.component';
@NgModule({
declarations: [
AppComponent,
SuccessComponent
],
imports: [
BrowserModule,
AppRoutingModule,
GithubAuthLibModule.withConfig({
clientId: 'YOUR-CLIENT-ID',
redirectUrl: 'http://localhost:4200/authcallback',
redirectAfterLogin: '/success', // Only example value, SuccessComponent is not included in the library
redirectAfterLogout: '/'
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Lets go over the config variables
Required
This is your google clientId. You can create an app here Github Apis and there is a lot of documentation online if you run into trouble.
Required
Since github only allows code flow login, you need to provide a server endpoint where you send your code to. This means that you will have to set up a server your self to handle this and have your client secret stored there. Luckily this is really easy to do thanks to this repository here Gatekeeper. If you have an azure account or an heroku account this is just a one button install. If not, there are some instructions on how to set this up in the repo. For further details go to the gatekeeper repo.
Required
Where your token is redirected from github, you will have to setup this redirect url on your app. You do that under your github account -> go to settings -> go to developer settings -> select your app and setup your callback. This is also where you get your clientId and clientSecret. The base address should be your app host ( localhost:4200 usually when deving ) and the endpoint to where the token is recived. In the example we use authcallback, this value does not matter so much sine the library takes care of registering this route for you and hooks upp the LoginComnent for you on that route. Just make sure that the route is registered on the github app.
Required
Where you want the application to redirect after a successfull login. In the example we are using the value /success but you should point it to a route where you want to redirect to. The path value is relative and should start with a forward slash.
Required
This is much like the redirectAfterLogin only for when we logout.
Optional
Default is an array with one value 'user'
This is an array of scopes to request when doing the login. For full list of supported scope values take a look at githubs documentation Github scopes
Here is an example on how to setup a navbar with the login link ( we will just use app.component here in this example )
app.component.html
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<label class="navbar-brand">GithubTest</label>
</div>
<div class="navbar-collapse">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<!--TheLogin link is here-->
<li ga-login></li>
</ul>
</div>
</div>
</nav>
<router-outlet></router-outlet>And that is really all you need, but you can provide your own templates if you want. You do it like so
app.component.html
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<label class="navbar-brand">GithubTest</label>
</div>
<div class="navbar-collapse">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<!--TheLogin link is here-->
<li ga-login>
<ng-template #login>
<a>Log Me In</a>
</ng-template>
<ng-template #logout>
<!-- In the component the GithubAuthService is called githubAuth here in this example -->
<ng-container *ngIf="githubAuth.userInfoSubject | async; let user">
<a>Logout {{user.login}}<span><img [src]="user.avatar_url" height="36" width="36"></span></a>
</ng-container>
</ng-template>
<ng-template #loading><div class="loading">Loading...</div></ng-template>
</li>
</ul>
</div>
</div>
</nav>
<router-outlet></router-outlet>The default templates are just a link with login and logout as text, and nothing for the loading. But if you want you can style it your self by appling your own templates. NOTE, the loading css class in the template is not needed, just a demonstration on how you could style it your self.
Get the access token for the logged in user
Gets the user info for the logged in user. The endpoint that is called to get that information is UserInfoEndpoint and you can read more about it here Github Users Documentation
You can subscribe to this BehaviorSubject to be notified when a user is logged in
You can subscribe to this BehaviorSubject to get the access token when it arrives
You can subscribe to this BehaviorSubject to get the user info when it arrives. See the User object here below
Logout, you can log the user out programmatically if that is what is needed, but the loggin component uses this when a user wants to log out.
Starts the login process, used in the login component.
export interface User {
login?: string;
id?: number;
node_id?: string;
avatar_url?: string;
gravatar_id?: string;
url?: string;
html_url?: string;
followers_url?: string;
following_url?: string;
gists_url?: string;
starred_url?: string;
subscriptions_url?: string;
organizations_url?: string;
repos_url?: string;
events_url?: string;
received_events_url?: string;
type?: string;
site_admin?: boolean;
name?: string;
company?: string;
blog?: string;
location?: string;
email?: string;
hireable?: boolean;
bio?: string;
public_repos?: number;
public_gists?: number;
followers?: number;
following?: number;
created_at?: string;
updated_at?: string;
total_private_repos?: number;
owned_private_repos?: number;
private_gists?: number;
disk_usage?: number;
collaborators?: number;
two_factor_authentication?: boolean;
plan?: Plan;
}
export interface Plan {
name?: string;
space?: number;
private_repos?: number;
collaborators?: number;
}One thing to note, the github access tokens do not expire.