For a friend, I am in the process of developing a custom website using the Nebular package. I want users to log in with their Twitch accounts to access the site, but I am encountering issues with the NbAuthModule
. Below is the code snippet:
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NbThemeModule, NbLayoutModule, NbButtonModule, NbIconModule, NbSpinnerModule, NbCardModule } from '@nebular/theme';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NbEvaIconsModule } from '@nebular/eva-icons';
import { HttpClientModule } from '@angular/common/http';
import { NbAuthModule, NbAuthOAuth2Token, NbOAuth2AuthStrategy, NbOAuth2GrantType } from '@nebular/auth';
import { ChannelComponent } from './pages/channel/channel.component';
import { NbOAuth2CallbackComponent } from './pages/OAuth2/NbOAuth2Callback.component';
import { NbOAuth2LoginComponent } from './pages/OAuth2/NbOAuth2Login.component';
@NgModule({
declarations: [
AppComponent,
ChannelComponent,
NbOAuth2LoginComponent,
NbOAuth2CallbackComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
NbThemeModule.forRoot({ name: 'dark' }),
NbLayoutModule,
NbButtonModule,
NbIconModule,
NbSpinnerModule,
NbCardModule,
NbAuthModule.forRoot({
strategies:[
NbOAuth2AuthStrategy.setup({
clientId:'<cliend-id>',
clientSecret: '<client-secret>',
defaultMessages:['Successfully logged in'],
name:'twitch',
baseEndpoint:'https://id.twitch.tv/oauth2/',
redirect:{
success:'pages/channel',
failure:'auth/error'
},
token:{
endpoint:'token',
grantType: NbOAuth2GrantType.AUTHORIZATION_CODE,
class: NbAuthOAuth2Token,
},
authorize:{
endpoint:'authorize',
scope:'user_read',
responseType: 'code',
redirectUri:'http://localhost:4200/auth/callback'
},
refresh:{
endpoint:'token',
grantType: NbOAuth2GrantType.REFRESH_TOKEN
}
}),
]
}),
NbEvaIconsModule,
HttpClientModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
NbOAuth2Login.component.ts
import { Component, OnDestroy } from '@angular/core';
import { NbAuthOAuth2Token, NbAuthResult, NbAuthService } from '@nebular/auth';
import { Subject } from 'rxjs';
import { map, tap, takeUntil} from 'rxjs/operators';
@Component({
selector: 'nb-oauth2-login',
template: `
<button nbButton outline *ngIf="!token" (click)="login()" status="primary" routerLink="auth/login">
<nb-icon icon="smiling-face-outline"></nb-icon>
Login
</button>
<button nbButton outline *ngIf="token" (click)="logout()">
Logout
</button>
`,
})
export class NbOAuth2LoginComponent implements OnDestroy {
private destroy$ = new Subject<void>();
// @ts-ignore
token: NbAuthOAuth2Token;
constructor(private authService: NbAuthService){
this.authService.onTokenChange()
.pipe(takeUntil(this.destroy$))
// @ts-ignore
.subscribe((token: NbAuthOAuth2Token) => {
// @ts-ignore
this.token = null;
if (token && token.isValid()) {
this.token = token;
}
});
}
login() {
this.authService.authenticate('twitch')
.pipe(takeUntil(this.destroy$))
.subscribe((authResult: NbAuthResult) => {
});
}
logout() {
this.authService.logout('twitch')
.pipe(takeUntil(this.destroy$))
.subscribe((authResult: NbAuthResult) => {
});
}
ngOnDestroy(): void {
this.destroy$.next();
this.destroy$.complete();
}
}
NbOAuth2Callback.component.ts
import { Component, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
import { NbAuthResult, NbAuthService } from '@nebular/auth';
import { Subject } from 'rxjs';
import { map, tap, takeUntil} from 'rxjs/operators';
@Component({
selector: 'nb-playground-oauth2-callback',
template: `
<nb-layout>
<nb-layout-column>
<nb-card [nbSpinner]="true" nbSpinnerSize="giant" nbSpinnerStatus="info">
<nb-card-body>
Authenticating...
</nb-card-body>
</nb-card>
</nb-layout-column>
</nb-layout>
`,
})
export class NbOAuth2CallbackComponent implements OnDestroy {
private destroy$ = new Subject<void>();
constructor(private authService: NbAuthService, private router: Router) {
this.authService.authenticate('twitch')
.pipe(takeUntil(this.destroy$))
.subscribe((authResult: NbAuthResult) => {
if (authResult.isSuccess() && authResult.getRedirect()) {
this.router.navigateByUrl(authResult.getRedirect());
}
else{
this.router.navigateByUrl('auth/error');
}
});
}
ngOnDestroy(): void {
this.destroy$.next();
this.destroy$.complete();
}
}
I have noticed that the Token is empty when using the Login module in debug mode, but I am unsure of the reason behind this.