From fa27b2f9a22fbad5f15ced8e11db260991993c86 Mon Sep 17 00:00:00 2001 From: RaviAnand Mohabir Date: Fri, 21 May 2021 16:23:19 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20login=20and=20profile=20route?= =?UTF-8?q?s=20to=20example=20app=20for=20showcase=20and=20testing?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/package.json | 1 + app/src/lib/appAuth.ts | 2 +- app/src/routes/__layout.svelte | 182 ++++++++++++++++++++++++++-- app/src/routes/index.svelte | 5 - app/src/routes/login.svelte | 194 +++++++++++++++++++++++++++++ app/src/routes/profile.svelte | 215 +++++++++++++++++++++++++++++++++ app/static/logo.svg | 12 ++ app/tailwind.config.cjs | 24 +++- app/yarn.lock | 7 +- src/jwt.ts | 0 10 files changed, 627 insertions(+), 15 deletions(-) delete mode 100644 app/src/routes/index.svelte create mode 100644 app/src/routes/login.svelte create mode 100644 app/src/routes/profile.svelte create mode 100644 app/static/logo.svg create mode 100644 src/jwt.ts diff --git a/app/package.json b/app/package.json index 22db6b2..a6d1cb7 100644 --- a/app/package.json +++ b/app/package.json @@ -31,6 +31,7 @@ "dependencies": { "@fontsource/fira-mono": "^4.3.0", "@fontsource/inter": "^4.3.0", + "clsx": "^1.1.1", "svelte-kit-auth": "link:../" } } diff --git a/app/src/lib/appAuth.ts b/app/src/lib/appAuth.ts index c9ad5a6..00f7761 100644 --- a/app/src/lib/appAuth.ts +++ b/app/src/lib/appAuth.ts @@ -46,7 +46,7 @@ export const appAuth = new SvelteKitAuth({ ...token, user: { ...token.user, - [provider]: account, + connections: { [provider]: account }, }, }; } diff --git a/app/src/routes/__layout.svelte b/app/src/routes/__layout.svelte index 6564670..ccad653 100644 --- a/app/src/routes/__layout.svelte +++ b/app/src/routes/__layout.svelte @@ -1,13 +1,181 @@ -
+ + SvelteKitAuth + + +
+ + SvelteKitAuth Logo + SvelteKitAuth + +
+ {#if $session?.user} + + {#if $page.path === "/profile"} + + + + {:else} + + + + {/if} + + + {:else} + + + + + + {/if} + + + + + + + + +
+
+ +
- - diff --git a/app/src/routes/index.svelte b/app/src/routes/index.svelte deleted file mode 100644 index 70edf03..0000000 --- a/app/src/routes/index.svelte +++ /dev/null @@ -1,5 +0,0 @@ -

Welcome to SvelteKit

-

- Visit kit.svelte.dev to read the - documentation -

diff --git a/app/src/routes/login.svelte b/app/src/routes/login.svelte new file mode 100644 index 0000000..b897ec2 --- /dev/null +++ b/app/src/routes/login.svelte @@ -0,0 +1,194 @@ + + + + Login | SvelteKitAuth + + +

Welcome to SvelteKitAuth

+ +
+

Login

+
+

+ Login with one of the configured social providers to test the social login. +

+ +
+ +
+ + + + + + + + + + + Sign in with Google + + + + + + + + + + Sign in with Facebook + + + + + + + Sign in with Reddit + + +

+ Coming soon. +

+ +
+ + + + + + Sign in with Twitter +
+
+ +
+ +

+ We will never share your identity with anyone else. +

+
diff --git a/app/src/routes/profile.svelte b/app/src/routes/profile.svelte new file mode 100644 index 0000000..9b61cbc --- /dev/null +++ b/app/src/routes/profile.svelte @@ -0,0 +1,215 @@ + + + + Profile | SvelteKitAuth + + +

Your Profile

+ +
+

Connections

+ +
+
+ + + + + + + + + +
+ {#if $session.user.connections.google} +

Signed in as:

+ {$session.user.connections.google.name} + {:else} +

Not signed in

+ + Connect + + {/if} +
+
+ +
+ + + + + + +
+ {#if $session.user.connections.facebook} +

Signed in as:

+ {$session.user.connections.facebook.name} + {:else} +

Not signed in

+ + Connect + + {/if} +
+
+
+ + + +
+ {#if $session.user.connections.reddit} +

Signed in as:

+ {$session.user.connections.reddit.name} + {:else} +

Not signed in

+ + Connect + + {/if} +
+
+
+ + + + + +
+ {#if $session.user.connections.twitter} +

Signed in as:

+ + {$session.user.connections.twitter.name} + {:else} +

Not signed in

+
+ Connect +
+ {/if} +
+
+
+ +

Session

+ 
+    {JSON.stringify($session, null, 2)}
+
+
diff --git a/app/static/logo.svg b/app/static/logo.svg new file mode 100644 index 0000000..dd07751 --- /dev/null +++ b/app/static/logo.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/app/tailwind.config.cjs b/app/tailwind.config.cjs index 2c79025..9d04d94 100644 --- a/app/tailwind.config.cjs +++ b/app/tailwind.config.cjs @@ -1,4 +1,6 @@ const { tailwindExtractor } = require("tailwindcss/lib/lib/purgeUnusedStyles"); +const { fontFamily } = require("tailwindcss/defaultTheme"); +const colors = require("tailwindcss/colors"); module.exports = { mode: "aot", @@ -17,7 +19,27 @@ module.exports = { safelist: [/^svelte-[\d\w]+$/], }, theme: { - extend: {}, + extend: { + fontFamily: { + sans: ["Inter", ...fontFamily.sans], + serif: [...fontFamily.serif], + mono: ["Fira Mono", ...fontFamily.mono], + }, + colors: { + transparent: "transparent", + current: "currentColor", + black: colors.black, + white: colors.white, + gray: colors.trueGray, + "cool-gray": colors.blueGray, + blue: colors.blue, + indigo: colors.indigo, + red: colors.rose, + orange: colors.orange, + yellow: colors.amber, + pink: colors.pink, + }, + }, }, variants: { extend: {}, diff --git a/app/yarn.lock b/app/yarn.lock index bc53fb5..33a983d 100644 --- a/app/yarn.lock +++ b/app/yarn.lock @@ -445,6 +445,11 @@ chokidar@^3.5.1: optionalDependencies: fsevents "~2.3.1" +clsx@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188" + integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA== + color-convert@^1.9.0, color-convert@^1.9.1: version "1.9.3" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" @@ -2146,7 +2151,7 @@ svelte-hmr@^0.14.2: resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.14.4.tgz#b7ef2bfeef23916e0e912828c50645ca572ac355" integrity sha512-kItFF7vqzStckSigoFmMnxJpTOdB9TWnQAW6Js+yAB4277tLbJIIE5KBlGHNmJNpA7MguqidsPB27Uw5UzQPCA== -"svelte-kit-auth@link:../": +"svelte-kit-auth@link:..": version "0.0.0" uid "" diff --git a/src/jwt.ts b/src/jwt.ts new file mode 100644 index 0000000..e69de29