Merge branch 'main' into pr/23

.github/workflows/lint-on-pr.yml

@@ -0,0 +1,19 @@
+name: Lint package on pull request
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - run: yarn install
+      - run: yarn lint

app/src/global.d.ts

@@ -14,6 +14,8 @@ declare global {
       TWITTER_API_SECRET: string;
       REDDIT_API_KEY: string;
       REDDIT_API_SECRET: string;
+      TWITCH_OAUTH_CLIENT_ID: string;
+      TWITCH_OAUTH_CLIENT_SECRET: string;
       JWT_SECRET_KEY: string;
       NODE_ENV: "development" | "production";
       PORT?: string;

app/src/lib/appAuth.ts

@@ -1,5 +1,6 @@
 import { SvelteKitAuth } from "sk-auth";
 import {
+  TwitchOAuth2Provider,
   FacebookOAuth2Provider,
   GoogleOAuth2Provider,
   RedditOAuth2Provider,
@@ -18,6 +19,13 @@ export const appAuth = new SvelteKitAuth({
         return { ...profile, provider: "google" };
       },
     }),
+    new TwitchOAuth2Provider({
+      clientId: import.meta.env.VITE_TWITCH_OAUTH_CLIENT_ID,
+      clientSecret: import.meta.env.VITE_TWITCH_OAUTH_CLIENT_SECRET,
+      profile(profile) {
+        return { ...profile, provider: "twitch" };
+      },
+    }),
     new FacebookOAuth2Provider({
       clientId: process.env.FACEBOOK_OAUTH_CLIENT_ID,
       clientSecret: process.env.FACEBOOK_OAUTH_CLIENT_SECRET,

app/src/routes/login.svelte

@@ -36,6 +36,38 @@
   <br />
 
   <div class={clsx("flex", "flex-col", "justify-items-stretch", "space-y-4")}>
+    <a
+      href="/api/auth/signin/twitch"
+      class={clsx(
+        "text-sm",
+        "md:text-base",
+        "inline-flex",
+        "space-x-4",
+        "py-2",
+        "px-4",
+        "border-gray-400",
+        "rounded",
+        "hover:no-underline",
+        "border",
+        "hover:bg-gray-100",
+        "transition-colors",
+        "items-center",
+      )}
+    >
+      <svg viewBox="0 0 300 300" class={clsx("h-4", "w-4", "md:h-6", "md:w-6")}>
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          fill="#65459B"
+          d="M215.2 260.8h-58.7L117.4 300H78.3v-39.2H6.6V52.2L26.1 0h267.3v182.6l-78.2 78.2zm52.2-91.2V26.1H52.2v189.1h58.7v39.1l39.1-39.1h71.7l45.7-45.6z"
+        /><path
+          fill="#65459B"
+          d="M195.6 78.3v78.3h26.1V78.3h-26.1zm-71.7 78.2H150V78.3h-26.1v78.2z"
+        />
+      </svg>
+      <span>Sign in with Twitch</span>
+    </a>
+
     <a
       href="/api/auth/signin/google"
       class={clsx(

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sk-auth",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "Authentication library for use with SvelteKit featuring built-in OAuth providers and zero restriction customization!",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/providers/index.ts

@@ -1,4 +1,6 @@
 export { Provider } from "./base";
+export { TwitchOAuth2Provider } from "./twitch";
+export type { TwitchProfile, TwitchTokens } from "./twitch";
 export { GoogleOAuth2Provider } from "./google";
 export type { GoogleProfile, GoogleTokens } from "./google";
 export { TwitterAuthProvider } from "./twitter";

src/providers/twitch.ts

@@ -0,0 +1,58 @@
+import { OAuth2Provider, OAuth2ProviderConfig } from "./oauth2";
+
+export interface TwitchProfile {
+  id: string;
+  login: string;
+  display_name: string;
+  type?: string;
+  broadcaster_type?: string;
+  description: boolean;
+  profile_image_url: string;
+  offline_image_url: string;
+  view_count: number;
+  email: string;
+  created_at: string;
+}
+
+export interface TwitchTokens {
+  access_token: string;
+  expires_in: number;
+  scope: string;
+  token_type: string;
+  refresh_token: string;
+}
+
+type TwitchOAuth2ProviderConfig = OAuth2ProviderConfig<TwitchProfile, TwitchTokens>;
+
+const defaultConfig: Partial<TwitchOAuth2ProviderConfig> = {
+  id: "twitch",
+  scope: "user:read:email",
+  accessTokenUrl: "https://id.twitch.tv/oauth2/token",
+  authorizationUrl: "https://id.twitch.tv/oauth2/authorize",
+  profileUrl: "https://api.twitch.tv/helix/users",
+};
+
+export class TwitchOAuth2Provider extends OAuth2Provider<
+  TwitchProfile,
+  TwitchTokens,
+  TwitchOAuth2ProviderConfig
+> {
+  constructor(config: TwitchOAuth2ProviderConfig) {
+    super({
+      ...defaultConfig,
+      ...config,
+    });
+  }
+
+  async getUserProfile(tokens: TwitchTokens): Promise<TwitchProfile> {
+    const headers = {
+      "Client-ID": this.config.clientId + "",
+      Accept: "application/vnd.twitchtv.v5+json",
+      Authorization: `Bearer ${tokens.access_token}`,
+    };
+    const {
+      data: [profile],
+    } = await fetch(this.config.profileUrl!, { headers: headers }).then((res) => res.json());
+    return profile;
+  }
+}