mirror of
https://github.com/Dan6erbond/sk-auth.git
synced 2025-04-14 01:16:30 +02:00
feat: add spotify oauth2 provider
This commit is contained in:
Alexander Staroselsky
parent
e8d22cfd6f
commit
3f79a1a525
@ -33,6 +33,7 @@
|
||||
"dependencies": {
|
||||
"@fontsource/fira-mono": "^4.3.0",
|
||||
"@fontsource/inter": "^4.3.0",
|
||||
"clipboard": "^2.0.8",
|
||||
"clsx": "^1.1.1",
|
||||
"prismjs": "^1.23.0",
|
||||
"sk-auth": "file:../"
|
||||
|
||||
4
app/src/global.d.ts
vendored
4
app/src/global.d.ts
vendored
@ -11,7 +11,7 @@ interface ImportMetaEnv {
|
||||
VITE_TWITTER_API_SECRET: string;
|
||||
VITE_REDDIT_API_KEY: string;
|
||||
VITE_REDDIT_API_SECRET: string;
|
||||
VITE_SPOTIFY_API_KEY: string;
|
||||
VITE_SPOTIFY_API_SECRET: string;
|
||||
VITE_SPOTIFY_CLIENT_ID: string;
|
||||
VITE_SPOTIFY_CLIENT_SECRET: string;
|
||||
VITE_JWT_SECRET_KEY: string;
|
||||
}
|
||||
|
||||
@ -47,8 +47,8 @@ export const appAuth = new SvelteKitAuth({
|
||||
},
|
||||
}),
|
||||
new SpotifyOAuth2Provider({
|
||||
apiKey: import.meta.env.VITE_SPOTIFY_API_KEY,
|
||||
apiSecret: import.meta.env.VITE_SPOTIFY_API_SECRET,
|
||||
clientId: import.meta.env.VITE_SPOTIFY_CLIENT_ID,
|
||||
clientSecret: import.meta.env.VITE_SPOTIFY_CLIENT_SECRET,
|
||||
profile(profile) {
|
||||
return { ...profile, provider: "spotify" };
|
||||
},
|
||||
|
||||
@ -180,6 +180,62 @@
|
||||
<span>Sign in with Reddit</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/api/auth/signin/spotify"
|
||||
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
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.1"
|
||||
viewBox="0 0 168 168"
|
||||
class={clsx("h-4", "w-4", "md:h-6", "md:w-6")}
|
||||
>
|
||||
<path
|
||||
fill="#1ED760"
|
||||
d="m83.996 0.277c-46.249 0-83.743 37.493-83.743 83.742 0 46.251 37.494 83.741 83.743 83.741 46.254 0 83.744-37.49 83.744-83.741 0-46.246-37.49-83.738-83.745-83.738l0.001-0.004zm38.404 120.78c-1.5 2.46-4.72 3.24-7.18 1.73-19.662-12.01-44.414-14.73-73.564-8.07-2.809 0.64-5.609-1.12-6.249-3.93-0.643-2.81 1.11-5.61 3.926-6.25 31.9-7.291 59.263-4.15 81.337 9.34 2.46 1.51 3.24 4.72 1.73 7.18zm10.25-22.805c-1.89 3.075-5.91 4.045-8.98 2.155-22.51-13.839-56.823-17.846-83.448-9.764-3.453 1.043-7.1-0.903-8.148-4.35-1.04-3.453 0.907-7.093 4.354-8.143 30.413-9.228 68.222-4.758 94.072 11.127 3.07 1.89 4.04 5.91 2.15 8.976v-0.001zm0.88-23.744c-26.99-16.031-71.52-17.505-97.289-9.684-4.138 1.255-8.514-1.081-9.768-5.219-1.254-4.14 1.08-8.513 5.221-9.771 29.581-8.98 78.756-7.245 109.83 11.202 3.73 2.209 4.95 7.016 2.74 10.733-2.2 3.722-7.02 4.949-10.73 2.739z"
|
||||
/>
|
||||
</svg>
|
||||
<!-- <svg viewBox="0 0 128 128" class={clsx("h-4", "w-4", "md:h-6", "md:w-6")}>
|
||||
<g id="original">
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M44.59,4.21a63.28,63.28,0,0,0,4.33,120.9,67.6,67.6,0,0,0,32.36.35A57.13,57.13,0,0,0,107.18,112a57.44,57.44,0,0,0,16-26.26,74.33,74.33,0,0,0,1.61-33.58H65.27c0,8.23,0,16.46,0,24.69H99.74A29.72,29.72,0,0,1,87.08,96.37a36.16,36.16,0,0,1-13.93,5.5,41.29,41.29,0,0,1-15.1,0A37.16,37.16,0,0,1,44,95.74a39.3,39.3,0,0,1-14.5-19.42,38.31,38.31,0,0,1,0-24.63,39.25,39.25,0,0,1,9.18-14.91A37.17,37.17,0,0,1,76.13,27a34.28,34.28,0,0,1,13.64,8q5.83-5.8,11.64-11.63c2-2.09,4.18-4.08,6.15-6.22A61.22,61.22,0,0,0,87.2,4.59,64,64,0,0,0,44.59,4.21Z"
|
||||
/>
|
||||
<path
|
||||
fill="#e33629"
|
||||
d="M44.59,4.21a64,64,0,0,1,42.61.37A61.22,61.22,0,0,1,107.55,17.2c-2,2.14-4.11,4.14-6.15,6.22Q95.58,29.23,89.77,35a34.28,34.28,0,0,0-13.64-8,37.17,37.17,0,0,0-37.46,9.74,39.25,39.25,0,0,0-9.18,14.91L8.76,35.6A63.53,63.53,0,0,1,44.59,4.21Z"
|
||||
/>
|
||||
<path
|
||||
fill="#f8bd00"
|
||||
d="M3.26,51.5a62.93,62.93,0,0,1,5.5-15.9L29.49,51.69a38.31,38.31,0,0,0,0,24.63q-10.36,8-20.73,16.08A63.33,63.33,0,0,1,3.26,51.5Z"
|
||||
/>
|
||||
<path
|
||||
fill="#587dbd"
|
||||
d="M65.27,52.15h59.52a74.33,74.33,0,0,1-1.61,33.58,57.44,57.44,0,0,1-16,26.26c-6.69-5.22-13.41-10.4-20.1-15.62A29.72,29.72,0,0,0,99.74,76.83H65.27C65.26,68.61,65.27,60.38,65.27,52.15Z"
|
||||
/>
|
||||
<path
|
||||
fill="#319f43"
|
||||
d="M8.75,92.4q10.37-8,20.73-16.08A39.3,39.3,0,0,0,44,95.74a37.16,37.16,0,0,0,14.08,6.08,41.29,41.29,0,0,0,15.1,0,36.16,36.16,0,0,0,13.93-5.5c6.69,5.22,13.41,10.4,20.1,15.62a57.13,57.13,0,0,1-25.9,13.47,67.6,67.6,0,0,1-32.36-.35,63,63,0,0,1-23-11.59A63.73,63.73,0,0,1,8.75,92.4Z"
|
||||
/>
|
||||
</g>
|
||||
</svg> -->
|
||||
<span>Sign in with Spotify</span>
|
||||
</a>
|
||||
|
||||
<p class={clsx("text-gray-600", "text-center", "border-gray-400", "border-b", "pb-2")}>
|
||||
Coming soon.
|
||||
</p>
|
||||
|
||||
@ -201,6 +201,47 @@
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class={clsx("flex", "items-center", "space-x-4")}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.1"
|
||||
viewBox="0 0 168 168"
|
||||
class={clsx("h-4", "w-4", "md:h-6", "md:w-6")}
|
||||
>
|
||||
<path
|
||||
fill="#1ED760"
|
||||
d="m83.996 0.277c-46.249 0-83.743 37.493-83.743 83.742 0 46.251 37.494 83.741 83.743 83.741 46.254 0 83.744-37.49 83.744-83.741 0-46.246-37.49-83.738-83.745-83.738l0.001-0.004zm38.404 120.78c-1.5 2.46-4.72 3.24-7.18 1.73-19.662-12.01-44.414-14.73-73.564-8.07-2.809 0.64-5.609-1.12-6.249-3.93-0.643-2.81 1.11-5.61 3.926-6.25 31.9-7.291 59.263-4.15 81.337 9.34 2.46 1.51 3.24 4.72 1.73 7.18zm10.25-22.805c-1.89 3.075-5.91 4.045-8.98 2.155-22.51-13.839-56.823-17.846-83.448-9.764-3.453 1.043-7.1-0.903-8.148-4.35-1.04-3.453 0.907-7.093 4.354-8.143 30.413-9.228 68.222-4.758 94.072 11.127 3.07 1.89 4.04 5.91 2.15 8.976v-0.001zm0.88-23.744c-26.99-16.031-71.52-17.505-97.289-9.684-4.138 1.255-8.514-1.081-9.768-5.219-1.254-4.14 1.08-8.513 5.221-9.771 29.581-8.98 78.756-7.245 109.83 11.202 3.73 2.209 4.95 7.016 2.74 10.733-2.2 3.722-7.02 4.949-10.73 2.739z"
|
||||
/>
|
||||
</svg>
|
||||
<div class={clsx("flex", "flex-col", "items-start", "space-y-1")}>
|
||||
{#if $session.user.connections.spotify}
|
||||
<p class={clsx("font-bold")}>Signed in as:</p>
|
||||
|
||||
{$session.user.connections.spotify.display_name}
|
||||
{:else}
|
||||
<p class={clsx("font-bold")}>Not signed in</p>
|
||||
<div
|
||||
class={clsx(
|
||||
"text-xs",
|
||||
"md:text-sm",
|
||||
"py-1",
|
||||
"px-2",
|
||||
"border-gray-400",
|
||||
"rounded",
|
||||
"hover:no-underline",
|
||||
"border",
|
||||
"hover:bg-gray-100",
|
||||
"transition-colors",
|
||||
"items-center",
|
||||
"cursor-not-allowed",
|
||||
"inline-block",
|
||||
)}
|
||||
>
|
||||
Connect
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class={clsx("text-lg", "mb-2")}>Session</p>
|
||||
|
||||
@ -1467,7 +1467,7 @@ chokidar@^3.5.1:
|
||||
optionalDependencies:
|
||||
fsevents "~2.3.1"
|
||||
|
||||
clipboard@^2.0.0:
|
||||
clipboard@^2.0.0, clipboard@^2.0.8:
|
||||
version "2.0.8"
|
||||
resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.8.tgz#ffc6c103dd2967a83005f3f61976aa4655a4cdba"
|
||||
integrity sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==
|
||||
@ -3441,12 +3441,6 @@ simple-swizzle@^0.2.2:
|
||||
cookie "^0.4.1"
|
||||
jsonwebtoken "^8.5.1"
|
||||
|
||||
"sk-auth@file:../":
|
||||
version "0.3.7"
|
||||
dependencies:
|
||||
cookie "^0.4.1"
|
||||
jsonwebtoken "^8.5.1"
|
||||
|
||||
slash@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
|
||||
|
||||
@ -43,6 +43,7 @@ const defaultConfig: Partial<SpotifyOAuth2ProviderConfig> = {
|
||||
accessTokenUrl: "https://accounts.spotify.com/api/token",
|
||||
authorizationUrl: "https://accounts.spotify.com/authorize",
|
||||
profileUrl: "https://api.spotify.com/v1/me",
|
||||
contentType: "application/x-www-form-urlencoded",
|
||||
};
|
||||
|
||||
export class SpotifyOAuth2Provider extends OAuth2Provider<
|
||||
|
||||
Loading…
Reference in New Issue
Block a user