Add Kick.com provider

[Woskus]

Goals

Yesterday Kick.com realeased open api and OAuth2 integration. Until we get the official integration in Next auth I have prepared a custom provider.
https://docs.kick.com/getting-started/generating-tokens-oauth2-flow

Non-Goals

No response

Background

Kick.com is a very fast-growing platform, so I think many users will need this integration.

Proposal

Custom provider:

import {OAuthConfig} from 'next-auth/providers';
import fetch from 'node-fetch';

type KickUserInfo = {
	data:
		| {
				user_id: number;
				name: string;
				email: string;
				profile_picture: string;
		  }[]
		| null;
	message: string;
};

async function getKickUserInfo(accessToken: string) {
	const url = 'https://api.kick.com/public/v1/users';
	const res = await fetch(url, {
		headers: {
			Authorization: `Bearer ${accessToken}`,
		},
	});

	if (!res.ok) {
		throw new Error('Failed to fetch user info from Kick API');
	}

	const json = (await res.json()) as KickUserInfo;

	const userInfo = json.data?.[0];

	if (!userInfo) {
		throw new Error('Cannot get user info details');
	}

	return userInfo;
}

export type KickProfile = {
	id: string;
	username: string;
	email: string;
	profile_picture: string;
};

export function KickProvider(options: {
	clientId: string;
	clientSecret: string;
	scope?: string;
}): OAuthConfig<KickProfile> {
	const {
		clientId,
		clientSecret,
		scope = 'user:read channel:read chat:write events:subscribe',
	} = options;

	return {
		id: 'kick',
		name: 'Kick',
		type: 'oauth',

		clientId,
		clientSecret,
		client: {
			token_endpoint_auth_method: 'client_secret_post',
		},

		checks: ['state', 'pkce'],

		authorization: {
			url: 'https://id.kick.com/oauth/authorize',
			params: {
				response_type: 'code',
				client_id: clientId,
				redirect_uri: `${process.env.NEXTAUTH_URL}/api/auth/callback/kick`,
				scope,
				code_challenge_method: 'S256',
			},
		},

		token: {
			url: 'https://id.kick.com/oauth/token',
			params: {
				grant_type: 'authorization_code',
			},
		},

		userinfo: {
			request: async (context) => {
				const {tokens} = context;
				const access_token = tokens.access_token;

				if (!access_token) {
					throw new Error("Missing 'access_token'");
				}

				const kickUserInfo = await getKickUserInfo(access_token);

				const profile: KickProfile = {
					id: String(kickUserInfo.user_id),
					username: kickUserInfo.name,
					email: kickUserInfo.email,
					profile_picture:
						kickUserInfo.profile_picture ||
						// Fallback, you can use images from 1 to 6
						'https://kick.com/img/default-profile-pictures/default2.jpeg',
				};

				return profile;
			},
		},

		profile(profile) {
			return {
				id: profile.id,
				name: profile.username,
				email: profile.email,
				image: profile.profile_picture,
			};
		},
	};
}

Usage:

NextAuth(req, res, {
		providers: [
			KickProvider({
				clientId: process.env.KICK_CLIENT_ID as string,
				clientSecret: process.env.KICK_CLIENT_SECRET as string,
			}),
		],
		// rest of your code
});