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.

musakui/twitch-login