musakui / twitch-login

A customized element for logging in to Twitch

twitch-login

A Custom Element that extends <a> to handle the Twitch OAuth login flow

This is for developers who are creating Twitch-related applications. If you want to login to Twitch, please head over to the actual site.

Usage

Note You will need to have an app in the Developer Console, and check the OAuth login flow

ES6 import

// html
<a is="twitch-login" scope="user:edit" client-id="[Client ID]">Login</a>

// js
import { getToken } from "https://cdn.skypack.dev/twitch-login/a"
const token = getToken()

<script> tag in HTML

Inner text defaults to "Login to Twitch"

// html
<script type="module" src="https://cdn.skypack.dev/twitch-login/a"></script>
<a id="login" is="twitch-login" scope="user:edit" client-id="[Client ID]"></a>

// js
const token = document.querySelector('#login').token

Styling

a[is="twitch-login"] {
  padding: 10px;
  display: block;
  color: #f0f0ff;
  text-align: center;
  text-decoration: none;
  background-color: #9146ff;
}

Attributes

• client-id - (required) Client ID from the Developer Console.
• scope - (required) Space-seperated list of scopes
• redirect - (default: window.location.host) URL to redirect the user to after the login
• force - (default: false) Re-prompt the user to login
• anti-csrf - (default: false) Use a CSRF-token

Ensure that the Redirect URL is in the list for your application.