Angular Twitch Login SDK

Integrate the Twitch login system into your amazing Angular project

Live demo

Stackblitz

Install

npm i twitch-login-sdk@latest --save

Import

app.module.ts

import {BrowserModule} from '@angular/platform-browser';  
import {NgModule} from '@angular/core';  
import {AppComponent} from './app.component';  
/** IMPORT **/
import  {TwitchLoginSdkModule} from "twitch-login-sdk"; 👈
  
@NgModule({  
  declarations: [  
    AppComponent  
  ],  
  imports: [  
    BrowserModule,   
	TwitchLoginSdkModule.forRoot({ 
		twitchId:  "xi7fl9ld6dlikhbv8xbfu77bzyjlkw", //<******* YOUR TWITCH_ID 👈
		redirect:  "https://twitch-sdk-login.stackblitz.io" //<***** YOUR CALLBACK REDIRECT 👈
	})
  ],  
  providers: [],  
  bootstrap: [AppComponent]  
})  
export class AppModule {  
}

app.component.html

scopes: Default user:read:email+openid+analytics:read:games+user:read:broadcast

<!-- Default -->
<twitch-login
(callback)="out($event)"
label="Login Twitch 🚀"
>
</twitch-login>

<!-- Pass scopes-->
<twitch-login
scopes="user:read:email+openid+analytics:read:games"
(callback)="out($event)"
label="Login Twitch 🚀">
</twitch-login>

Use

Use in your component

import  {Component,  OnInit}  from  '@angular/core'; 

@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
export class AppComponent implements  OnInit {  
	public outCb:  any;
	constructor(){}
	
	ngOnInit() {
	
	}

	/** Callback Data **/
	out($event): any   {
    	this.outCb = $event;
  	}
}

Customize

buttom-twitch-login: Classname for button