9 |
31 |
--------------------------------------------------------------------------------
/src/lib/components/navbar/LoggedOut.svelte:
--------------------------------------------------------------------------------
1 |
10 |
22 |
30 |
11 | {#if profileImage}
12 | 
17 | {:else}
18 |
19 | {/if}
20 |
21 |
2 |
6 |
7 |
--------------------------------------------------------------------------------
/src/lib/components/navbar/Navbar.svelte:
--------------------------------------------------------------------------------
1 |
10 |
11 |
25 |
--------------------------------------------------------------------------------
/src/lib/components/navbar/ToggleLightDarkMode.svelte:
--------------------------------------------------------------------------------
1 |
60 |
61 |
62 |
82 |
83 |
84 |
99 |
--------------------------------------------------------------------------------
/src/lib/components/svgs/Google.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
43 |
44 |
151 |
--------------------------------------------------------------------------------
/src/lib/database/user.database.ts:
--------------------------------------------------------------------------------
1 | // Libraries and modules
2 | import { supabaseServerClient } from '$lib/services/supabase.service';
3 |
4 | // Types
5 | import type { Tables } from '$lib/types/supabase';
6 | import type { UserInsert, UserUpdate } from '$lib/types/users';
7 |
8 | /**
9 | * Gets the user by id
10 | *
11 | * @param id
12 | * @returns Tables<'users'>
13 | */
14 | async function getById(id: string): Promise
2 |
9 |
--------------------------------------------------------------------------------
/src/routes/account/+page.server.ts:
--------------------------------------------------------------------------------
1 | // Libraries and modules
2 | import { ImageService } from '$lib/services/image.service';
3 | import { UserDatabase } from '$lib/database/user.database';
4 |
5 | // Types and constants
6 | import { redirect, type Actions } from '@sveltejs/kit';
7 | import type { PageServerLoad } from './$types';
8 |
9 | /**
10 | * Server load on registration checks if user is already logged in and redirects
11 | * to home page, otherwise returns auth providers if they exist.
12 | */
13 | export const load: PageServerLoad = async ({ locals }) => {
14 | const session = await locals.safeGetSession();
15 | if (session.user == null) {
16 | redirect(303, '/');
17 | }
18 | };
19 |
20 | /**
21 | * Registration action
22 | */
23 | export const actions = {
24 | /**
25 | * Upload action for profile image
26 | */
27 | upload: async ({ locals, request }) => {
28 | const formData = await request.formData();
29 | const file = formData.get('file') as File;
30 |
31 | if (file) {
32 | const profileImage = await ImageService.uploadProfileImage(file);
33 | const { user } = await locals.safeGetSession();
34 | if (user && profileImage) {
35 | const updatedUser = await UserDatabase.update(user.id, {
36 | profile_image: profileImage
37 | });
38 | return updatedUser;
39 | }
40 | }
41 | }
42 | } satisfies Actions;
43 |
--------------------------------------------------------------------------------
/src/routes/account/+page.svelte:
--------------------------------------------------------------------------------
1 |
43 |
44 |
3 |
8 |
4 |
7 | Welcome!
5 |Put some site information here!
6 |
45 |
79 |
--------------------------------------------------------------------------------
/src/routes/account/auth/callback/google/+server.ts:
--------------------------------------------------------------------------------
1 | // Libraries and modules
2 | import { redirect, type RequestHandler } from '@sveltejs/kit';
3 | import { supabaseServerClient } from '$lib/services/supabase.service';
4 | import { UserDatabase } from '$lib/database/user.database';
5 |
6 | // Types
7 | import type { Tables } from '$lib/types/supabase';
8 |
9 | /**
10 | * Called to complete the user signing with Google
11 | * @param event
12 | */
13 | export const GET: RequestHandler = async (event) => {
14 | const {
15 | url,
16 | locals: { supabase }
17 | } = event;
18 |
19 | // Retrieves the unique value (code) used in the sign in process as well as
20 | // the redirect route.
21 | const code = url.searchParams.get('code') as string;
22 | const next = url.searchParams.get('next') ?? '/';
23 |
24 | if (code) {
25 | let user: Tables<'users'> | null;
26 |
27 | const supabaseClient = event.locals.supabase;
28 | const supabaseServer = supabaseServerClient;
29 |
30 | // Checks that the code is valid (PKCE - proof key for exchange)
31 | const codeResult = await supabaseClient.auth.exchangeCodeForSession(code);
32 | if (codeResult.error) {
33 | throw redirect(303, '/auth/auth-code-error');
34 | }
35 |
36 | // There should be a session created at this point which contains the user
37 | // metadata from Google
38 | const session = await event.locals.safeGetSession();
39 | if (session.user == null) {
40 | throw redirect(303, '/auth/session-not-found');
41 | }
42 |
43 | // Check to see if this user has already signed in previously
44 | user = await UserDatabase.getById(session.user.id);
45 |
46 | // If the user doesn't exist then create an entry in our own user tables
47 | // (not the private, inaccessible one supabase uses)
48 | if (user == null) {
49 | if (session.user.id && session.user.email) {
50 | user = await UserDatabase.insert({
51 | id: session.user.id,
52 | email: session.user.email,
53 | username: session.user.email,
54 | profile_image: 'default-avatar.jpg',
55 | role: 'user'
56 | });
57 | }
58 | }
59 |
60 | // If user still equals null, then we've had an error
61 | if (user == null) {
62 | throw redirect(303, '/errors?error=Failed to create user');
63 | }
64 |
65 | // Success, reroute the user to the desired location
66 | throw redirect(303, `/${next.slice(1)}`);
67 | }
68 |
69 | throw redirect(303, '/errors?error=Failure with Google auth server');
70 | };
71 |
--------------------------------------------------------------------------------
/src/routes/account/login/+page.server.ts:
--------------------------------------------------------------------------------
1 | // Libraries
2 | import { AuthApiError } from '@supabase/supabase-js';
3 | import { fail, redirect } from '@sveltejs/kit';
4 |
5 | // Types
6 | import type { Actions } from '@sveltejs/kit';
7 | import type { PageServerLoad } from '../$types';
8 |
9 | // Variables
10 | import { PUBLIC_ADDRESS } from '$env/static/public';
11 | import { PRIVATE_SUPABASE_OAUTH_REDIRECT } from '$env/static/private';
12 |
13 | /**
14 | * Server load on login checks if user is already logged in.
15 | */
16 | export const load: PageServerLoad = async ({ locals }) => {
17 | const session = await locals.safeGetSession();
18 | if (session.user) {
19 | redirect(303, '/');
20 | }
21 | };
22 |
23 | /**
24 | * Handles the login actions for email and Google
25 | */
26 | export const actions: Actions = {
27 | /**
28 | * Registers the user via email.
29 | *
30 | * Note: This is limited with the free Supabase plan. Check how many email
31 | * users are allowed per hour. Last I checked it was three new accounts.
32 | *
33 | * @param request
34 | * @param locals
35 | * @returns
36 | */
37 | email: async ({ request, locals }) => {
38 | const body = Object.fromEntries(await request.formData());
39 | const { error } = await locals.supabase.auth.signInWithPassword({
40 | email: body.email as string,
41 | password: body.password as string
42 | });
43 |
44 | // If there's an error send that back to the user to be displayed on the
45 | // Login page.
46 | if (error) {
47 | if (error instanceof AuthApiError && error.status === 400) {
48 | return fail(400, {
49 | error: 'Invalid username or password'
50 | });
51 | }
52 | return fail(500, {
53 | message: 'Server error. Try again later.'
54 | });
55 | }
56 |
57 | throw redirect(303, '/');
58 | },
59 |
60 | /**
61 | * Registers via Google
62 | *
63 | * Note: This should be done with the public Supabase client attached to
64 | * locals in hooks.server.ts.
65 | *
66 | * @param param0
67 | * @returns
68 | */
69 | google: async ({ locals }) => {
70 | const { data, error } = await locals.supabase.auth.signInWithOAuth({
71 | provider: 'google',
72 | options: {
73 | scopes: 'https://www.googleapis.com/auth/userinfo.email',
74 | redirectTo: `${PUBLIC_ADDRESS}/${PRIVATE_SUPABASE_OAUTH_REDIRECT}/google`
75 | }
76 | });
77 |
78 | if (error) {
79 | if (error instanceof AuthApiError && error.status === 400) {
80 | return fail(400, {
81 | error: 'Invalid credentials'
82 | });
83 | }
84 | return fail(500, {
85 | message: 'Server error. Try again later.'
86 | });
87 | }
88 |
89 | throw redirect(303, data.url);
90 | }
91 | };
92 |
--------------------------------------------------------------------------------
/src/routes/account/login/+page.svelte:
--------------------------------------------------------------------------------
1 |
54 |
55 |
46 | {#if userStore.exists}
47 |
78 |
48 |
74 |
76 | {/if}
77 | {userStore.username}
75 |
56 |
107 |
--------------------------------------------------------------------------------
/src/routes/account/logout/+page.server.ts:
--------------------------------------------------------------------------------
1 | // Libraries and modules
2 | import { redirect } from '@sveltejs/kit';
3 |
4 | // Types
5 | import type { Actions } from '@sveltejs/kit';
6 | import type { PageServerLoad } from '../$types';
7 |
8 | /**
9 | * Server load on login checks if user is already logged in.
10 | */
11 | export const load: PageServerLoad = async ({ locals }) => {
12 | const session = await locals.safeGetSession();
13 | if (session.user == null) {
14 | redirect(303, '/');
15 | }
16 | };
17 |
18 | /**
19 | * Logs the user out
20 | */
21 | export const actions = {
22 | logout: async ({ locals }) => {
23 | await locals.supabase.auth.signOut();
24 | }
25 | } satisfies Actions;
26 |
--------------------------------------------------------------------------------
/src/routes/account/logout/+page.svelte:
--------------------------------------------------------------------------------
1 |
57 |
106 | Login
58 | 59 | 92 | 93 |
94 |
95 |
96 |
97 |
105 | 95 |
2 |
9 |
--------------------------------------------------------------------------------
/src/routes/account/register/+page.server.ts:
--------------------------------------------------------------------------------
1 | // Libraries
2 | import { AuthApiError } from '@supabase/supabase-js';
3 | import { fail, redirect } from '@sveltejs/kit';
4 |
5 | // Types and constants
6 | import type { Actions } from '@sveltejs/kit';
7 | import type { ErrorRegisterUser } from '$lib/types/account';
8 | import type { PageServerLoad } from './$types';
9 | import type { Tables } from '$lib/types/supabase';
10 |
11 | // Variables
12 | import { UserDatabase } from '$lib/database/user.database';
13 | import { PRIVATE_SUPABASE_OAUTH_REDIRECT } from '$env/static/private';
14 | import { PUBLIC_ADDRESS } from '$env/static/public';
15 |
16 | /**
17 | * Server load on registration checks if user is already logged in and redirects
18 | * to home page, otherwise returns auth providers if they exist.
19 | */
20 | export const load: PageServerLoad = async ({ locals }) => {
21 | const session = await locals.safeGetSession();
22 | if (session.user) {
23 | redirect(303, '/');
24 | }
25 | };
26 |
27 | /**
28 | * Registration action
29 | */
30 | export const actions = {
31 | /**
32 | * Email registration
33 | */
34 | email: async ({ locals, request }) => {
35 | // Using the service role client
36 | const supabase = locals.supabase;
37 |
38 | // Get form data
39 | const formData = await request.formData();
40 | const username = formData.get('username') as string;
41 | const email = formData.get('email') as string;
42 | const password = formData.get('password') as string;
43 | const passwordConfirm = formData.get('passwordConfirm') as string;
44 |
45 | // Check if the email or username has been used.
46 | const userEmail = await UserDatabase.getByEmail(email);
47 | const userUsername = await UserDatabase.getByUsername(username);
48 |
49 | let errors: ErrorRegisterUser = {};
50 |
51 | if (userEmail) {
52 | errors.email = 'Email already in use.';
53 | } else if (userUsername) {
54 | errors.username = 'Username already in use.';
55 | } else if (password != passwordConfirm) {
56 | errors.password = 'Passwords do not match';
57 | }
58 |
59 | // Check the errors objects to see if any exist
60 | if (Object.keys(errors).length > 0) {
61 | return fail(500, { errors: errors });
62 | }
63 |
64 | let user: Tables<'users'> | null = null;
65 |
66 | const { data, error: error } = await supabase.auth.signUp({ email, password });
67 |
68 | // Insert user if all the necessary data has been inserted during sign up.
69 | if (data && data.user && data.user.email && data.user.user_metadata.email) {
70 | user = await UserDatabase.insert({
71 | id: data.user.id,
72 | email: data.user.email,
73 | username: data.user.email,
74 | profile_image: 'default-avatar.jpg',
75 | role: 'user'
76 | });
77 | }
78 |
79 | if (error || user == null) {
80 | // If there was an error or we couldn't create the additional 'users' data
81 | // then rollback the user creation.
82 | if (data && data.user) {
83 | await supabase.auth.admin.deleteUser(data.user.id);
84 | }
85 | return redirect(303, '/errors');
86 | } else {
87 | throw redirect(302, '/account/login');
88 | }
89 | },
90 |
91 | /**
92 | * Google OAuth2
93 | *
94 | * We get the provider from list of possible providers (set in Pocketbase) by
95 | * name and then set the cookie. If valid, we concat Google's auth url with
96 | * the redirect set in Google console as well as our provider name see
97 | * /account/oauth/google route.
98 | *
99 | * @param param0
100 | */
101 | google: async ({ locals }) => {
102 | const { data, error: err } = await locals.supabase.auth.signInWithOAuth({
103 | provider: 'google',
104 | options: {
105 | scopes: 'https://www.googleapis.com/auth/userinfo.email',
106 | redirectTo: `${PUBLIC_ADDRESS}/${PRIVATE_SUPABASE_OAUTH_REDIRECT}/google`
107 | }
108 | });
109 |
110 | if (err) {
111 | if (err instanceof AuthApiError && err.status === 400) {
112 | return fail(400, {
113 | error: 'Invalid credentials'
114 | });
115 | }
116 | return fail(500, {
117 | message: 'Server error. Try again later.'
118 | });
119 | }
120 |
121 | throw redirect(303, data.url);
122 | }
123 | } satisfies Actions;
124 |
--------------------------------------------------------------------------------
/src/routes/account/register/+page.svelte:
--------------------------------------------------------------------------------
1 |
49 |
50 |
3 |
8 |
4 |
7 | Logged out
5 | 6 |
51 |
131 |
--------------------------------------------------------------------------------
/src/routes/errors/+page.svelte:
--------------------------------------------------------------------------------
1 |
10 |
11 |
52 |
130 | Register
53 | 54 | 116 | 117 |
118 |
119 |
120 |
121 |
129 | 119 |
12 |
19 |
--------------------------------------------------------------------------------
/src/routes/errors/+page.ts:
--------------------------------------------------------------------------------
1 | import type { PageLoad } from './$types';
2 |
3 | /**
4 | * This gets the error and passes it on to the page
5 | *
6 | * @param url
7 | * @returns
8 | */
9 | export const load: PageLoad = ({ url }) => {
10 | const error = url.searchParams.get('error');
11 |
12 | return {
13 | error
14 | };
15 | };
16 |
--------------------------------------------------------------------------------
/static/defaults/default-avatar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kilroyjones/sveltekit-supabase-template/4a2ad91f535da103badfc43385ea0e60f1dafa06/static/defaults/default-avatar.jpg
--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kilroyjones/sveltekit-supabase-template/4a2ad91f535da103badfc43385ea0e60f1dafa06/static/favicon.ico
--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kilroyjones/sveltekit-supabase-template/4a2ad91f535da103badfc43385ea0e60f1dafa06/static/favicon.png
--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
1 | import adapter from '@sveltejs/adapter-auto';
2 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
3 |
4 | /** @type {import('@sveltejs/kit').Config} */
5 | const config = {
6 | // Consult https://kit.svelte.dev/docs/integrations#preprocessors
7 | // for more information about preprocessors
8 | preprocess: vitePreprocess(),
9 |
10 | kit: {
11 | // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
12 | // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
13 | // See https://kit.svelte.dev/docs/adapters for more information about adapters.
14 | adapter: adapter()
15 | }
16 | };
17 |
18 | export default config;
19 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 | content: ['./src/**/*.{html,js,svelte,ts}'],
4 |
5 | theme: {
6 | extend: {}
7 | },
8 | plugins: [require('daisyui')],
9 | daisyui: {
10 | themes: ['cupcake', 'synthwave']
11 | }
12 | };
13 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./.svelte-kit/tsconfig.json",
3 | "compilerOptions": {
4 | "allowJs": true,
5 | "checkJs": true,
6 | "esModuleInterop": true,
7 | "forceConsistentCasingInFileNames": true,
8 | "resolveJsonModule": true,
9 | "skipLibCheck": true,
10 | "sourceMap": true,
11 | "strict": true,
12 | "moduleResolution": "bundler"
13 | }
14 | // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
15 | // except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
16 | //
17 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
18 | // from the referenced tsconfig.json - TypeScript does not merge them in
19 | }
20 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { sveltekit } from '@sveltejs/kit/vite';
2 | import { defineConfig } from 'vite';
3 |
4 | export default defineConfig({
5 | plugins: [sveltekit()]
6 | });
7 |
--------------------------------------------------------------------------------
13 |
18 |
14 |
17 | Sorry, there was an error!
15 |{data.error}
16 |