twitch-login-sdk

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 {  
    constructor(){}
    
    ngOnInit() {
    
    }
    
    public outCb:  any;
    /** Callback Data **/
    out = $event =>  {
        this.outCb = $event;
    };
}

Customize

buttom-twitch-login: Classname for button