├── .npmrc
├── README.md
├── .gitattributes
├── static
    └── favicon.png
├── src
    ├── routes
    │   ├── +page.svelte
    │   ├── privatedashboard
    │   │   └── +page.svelte
    │   └── +layout.svelte
    ├── app.html
    ├── lib
    │   └── firebase
    │   │   └── firebase.client.js
    ├── stores
    │   └── authStore.js
    └── components
    │   ├── AuthReset.svelte
    │   └── Auth.svelte
├── vite.config.js
├── .gitignore
├── svelte.config.js
├── .eslintignore
├── .prettierignore
├── .prettierrc
├── .eslintrc.cjs
└── package.json


/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # sveltekit-auth
2 |  SvelteKit Auth W. Firebase
3 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamezmca/sveltekit-auth/HEAD/static/favicon.png


--------------------------------------------------------------------------------
/src/routes/+page.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 | 	import Auth from "../components/Auth.svelte";
3 | 
4 | </script>
5 | <Auth/>


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { sveltekit } from '@sveltejs/kit/vite';
2 | 
3 | const config = {
4 | 	plugins: [sveltekit()]
5 | };
6 | 
7 | export default config;
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | vite.config.js.timestamp-*
10 | vite.config.ts.timestamp-*
11 | 


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import adapter from '@sveltejs/adapter-auto';
 2 | 
 3 | /** @type {import('@sveltejs/kit').Config} */
 4 | const config = {
 5 | 	kit: {
 6 | 		adapter: adapter()
 7 | 	}
 8 | };
 9 | 
10 | export default config;
11 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | 
10 | # Ignore files for PNPM, NPM and YARN
11 | pnpm-lock.yaml
12 | package-lock.json
13 | yarn.lock
14 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | 
10 | # Ignore files for PNPM, NPM and YARN
11 | pnpm-lock.yaml
12 | package-lock.json
13 | yarn.lock
14 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"useTabs": true,
 3 | 	"singleQuote": true,
 4 | 	"trailingComma": "none",
 5 | 	"printWidth": 100,
 6 | 	"plugins": ["prettier-plugin-svelte"],
 7 | 	"pluginSearchDirs": ["."],
 8 | 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 9 | }
10 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	root: true,
 3 | 	extends: ['eslint:recommended', 'prettier'],
 4 | 	plugins: ['svelte3'],
 5 | 	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
 6 | 	parserOptions: {
 7 | 		sourceType: 'module',
 8 | 		ecmaVersion: 2020
 9 | 	},
10 | 	env: {
11 | 		browser: true,
12 | 		es2017: true,
13 | 		node: true
14 | 	}
15 | };
16 | 


--------------------------------------------------------------------------------
/src/app.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 6 | 		<meta name="viewport" content="width=device-width" />
 7 | 		%sveltekit.head%
 8 | 		<style>
 9 | 			* {
10 | 				box-sizing: border-box;
11 | 				margin: 0;
12 | 				padding: 0;
13 | 			}
14 | 
15 | 		
16 | 		</style>
17 | 	</head>
18 | 	<body data-sveltekit-preload-data="hover">
19 | 		<div style="display: contents">%sveltekit.body%</div>
20 | 	</body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "sveltekit-auth",
 3 | 	"version": "0.0.1",
 4 | 	"private": true,
 5 | 	"scripts": {
 6 | 		"dev": "vite dev",
 7 | 		"build": "vite build",
 8 | 		"preview": "vite preview",
 9 | 		"lint": "prettier --plugin-search-dir . --check . && eslint .",
10 | 		"format": "prettier --plugin-search-dir . --write ."
11 | 	},
12 | 	"devDependencies": {
13 | 		"@sveltejs/adapter-auto": "^1.0.0",
14 | 		"@sveltejs/kit": "^1.0.0",
15 | 		"eslint": "^8.28.0",
16 | 		"eslint-config-prettier": "^8.5.0",
17 | 		"eslint-plugin-svelte3": "^4.0.0",
18 | 		"prettier": "^2.8.0",
19 | 		"prettier-plugin-svelte": "^2.8.1",
20 | 		"svelte": "^3.54.0",
21 | 		"vite": "^4.0.0"
22 | 	},
23 | 	"type": "module",
24 | 	"dependencies": {
25 | 		"firebase": "^9.17.1"
26 | 	}
27 | }
28 | 


--------------------------------------------------------------------------------
/src/routes/privatedashboard/+page.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import AuthReset from '../../components/AuthReset.svelte';
 3 | 	import { auth } from '../../lib/firebase/firebase.client';
 4 | 	import { authHandlers, authStore } from '../../stores/authStore';
 5 | 
 6 | 	let email;
 7 | 	authStore.subscribe((curr) => {
 8 | 		console.log('CURR', curr);
 9 | 		email = curr?.currentUser?.email;
10 | 	});
11 | </script>
12 | 
13 | {#if $authStore.currentUser}
14 | 	<div>
15 | 		<h1>CURRENT USER: {email}</h1>
16 | 		<AuthReset />
17 |         <button on:click={authHandlers.logout}>Logout</button>
18 | 
19 | 	</div>
20 | {:else}
21 | 	<div>Loading....</div>
22 | {/if}
23 | 
24 | <style>
25 | 	div {
26 | 		flex: 1;
27 | 		display: flex;
28 | 		flex-direction: column;
29 | 		justify-content: center;
30 | 		align-items: center;
31 | 	}
32 | 
33 | 	h1 {
34 | 		text-align: center;
35 | 	}
36 | </style>
37 | 


--------------------------------------------------------------------------------
/src/routes/+layout.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { onMount } from 'svelte';
 3 | 	import { auth } from '../lib/firebase/firebase.client';
 4 | 	import { browser } from '$app/environment';
 5 | 	import { authStore } from '../stores/authStore';
 6 | 	onMount(() => {
 7 | 		const unsubscribe = auth.onAuthStateChanged((user) => {
 8 | 			console.log(user);
 9 | 			authStore.update((curr) => {
10 | 				return { ...curr, isLoading: false, currentUser: user };
11 | 			});
12 | 
13 | 			if (
14 | 				browser &&
15 | 				!$authStore?.currentUser &&
16 | 				!$authStore.isLoading &&
17 | 				window.location.pathname !== '/'
18 | 			) {
19 | 				window.location.href = '/';
20 | 				console.log(authStore.currentUser, authStore.isLoading);
21 | 			}
22 | 		});
23 | 		return unsubscribe;
24 | 	});
25 | </script>
26 | 
27 | <main class="mainContainer">
28 | 	<slot />
29 | </main>
30 | 
31 | <style>
32 | 	.mainContainer {
33 | 		min-height: 100vh;
34 | 		display: flex;
35 | 		flex-direction: column;
36 | 	}
37 | </style>
38 | 


--------------------------------------------------------------------------------
/src/lib/firebase/firebase.client.js:
--------------------------------------------------------------------------------
 1 | // Import the functions you need from the SDKs you need
 2 | import { deleteApp, getApp, getApps, initializeApp } from "firebase/app";
 3 | // TODO: Add SDKs for Firebase products that you want to use
 4 | // https://firebase.google.com/docs/web/setup#available-libraries
 5 | import { getAuth, setPersistence, inMemoryPersistence } from 'firebase/auth'
 6 | 
 7 | // Your web app's Firebase configuration
 8 | const firebaseConfig = {
 9 |     apiKey: import.meta.env.VITE_APIKEY,
10 |     authDomain: import.meta.env.VITE_AUTHDOMAIN,
11 |     projectId: import.meta.env.VITE_PROJECTID,
12 |     storageBucket: import.meta.env.VITE_STORAGEBUCKET,
13 |     messagingSenderId: import.meta.env.VITE_MESSAGINGSENDERID,
14 |     appId: import.meta.env.VITE_APPID
15 | };
16 | 
17 | // Initialize Firebase
18 | let firebaseApp;
19 | if (!getApps().length) {
20 |     firebaseApp = initializeApp(firebaseConfig)
21 | } else {
22 |     firebaseApp = getApp()
23 |     deleteApp(firebaseApp)
24 |     firebaseApp = initializeApp(firebaseConfig)
25 | }
26 | 
27 | export const auth = getAuth(firebaseApp)


--------------------------------------------------------------------------------
/src/stores/authStore.js:
--------------------------------------------------------------------------------
 1 | import { createUserWithEmailAndPassword, sendPasswordResetEmail, signInWithEmailAndPassword, signOut, updateEmail, updatePassword } from "firebase/auth";
 2 | import { writable } from "svelte/store";
 3 | import { auth } from "../lib/firebase/firebase.client";
 4 | 
 5 | export const authStore = writable({
 6 |     isLoading: true,
 7 |     currentUser: null
 8 | })
 9 | 
10 | export const authHandlers = {
11 |     login: async (email, password) => {
12 |         await signInWithEmailAndPassword(auth, email, password)
13 |     },
14 |     signup: async (email, password) => {
15 |         await createUserWithEmailAndPassword(auth, email, password)
16 |     },
17 |     logout: async () => {
18 |         await signOut(auth)
19 |     },
20 |     resetPassword: async (email) => {
21 |         console.log('WE ARE HERE', email)
22 |         if (!email) {
23 |             console.log('inHERE')
24 |             return
25 |         }
26 |         await sendPasswordResetEmail(auth, email)
27 |     },
28 |     updateEmail: async (email) => {
29 |         authStore.update(curr => {
30 |             return {
31 |                 ...curr, currentUser: {
32 |                     ...curr.currentUser, email: email
33 |                 }
34 |             }
35 |         })
36 |         await updateEmail(auth.currentUser, email)
37 |     },
38 |     updatePassword: async (password) => {
39 |         await updatePassword(auth.currentUser, password)
40 |     }
41 | }


--------------------------------------------------------------------------------
/src/components/AuthReset.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { authHandlers, authStore } from '../stores/authStore';
 3 | 
 4 | 	let action = '';
 5 | 	let newEmail = '';
 6 | 	let newPass = '';
 7 | 
 8 | 	async function handleSubmit() {
 9 | 		if (!action) {
10 | 			return;
11 | 		}
12 | 
13 | 		if (action === 'updatePass') {
14 | 			return await authHandlers.updatePassword(newPass);
15 | 		}
16 | 
17 | 		if (action === 'updateEmail') {
18 |             console.log(newEmail)
19 | 			return await authHandlers.updateEmail(newEmail);
20 | 		}
21 | 	}
22 | </script>
23 | 
24 | <div class="container">
25 | 	<div>
26 | 		<button
27 | 			on:click={() => {
28 | 				action = 'updateEmail';
29 | 			}}>Update Email</button
30 | 		>
31 | 		<button
32 | 			on:click={() => {
33 | 				action = 'updatePass';
34 | 			}}>Update Password</button
35 | 		>
36 | 	</div>
37 | 	{#if action === 'updatePass'}
38 | 		<form>
39 | 			<label>
40 | 				<input bind:value={newPass} type="password" placeholder="New Password" />
41 | 			</label>
42 | 
43 | 			<button on:click={handleSubmit}>Submit</button>
44 | 		</form>
45 | 	{/if}
46 | 	{#if action === 'updateEmail'}
47 | 		<form>
48 | 			<label>
49 | 				<input bind:value={newEmail} type="email" placeholder="New Email" />
50 | 			</label>
51 | 			<button on:click={handleSubmit}>Submit</button>
52 | 		</form>
53 | 	{/if}
54 | </div>
55 | 
56 | <style>
57 | 	.container {
58 | 		display: flex;
59 | 		flex-direction: column;
60 | 		align-items: center;
61 | 		justify-content: center;
62 | 		flex: 1;
63 | 	}
64 | 
65 | 	.container form {
66 | 		display: flex;
67 | 		flex-direction: column;
68 | 	}
69 | 
70 | 	.container div {
71 | 		display: grid;
72 | 		grid-template-columns: repeat(2, minmax(0, 1fr));
73 | 	}
74 | </style>
75 | 


--------------------------------------------------------------------------------
/src/components/Auth.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { authHandlers, authStore } from '../stores/authStore';
 3 | 
 4 | 	let register = false;
 5 | 	let email = '';
 6 | 	let password = '';
 7 | 	let confirmPassword = '';
 8 | 
 9 | 	async function handleSubmit() {
10 | 		if (!email || !password || (register && !confirmPassword)) {
11 | 			return;
12 | 		}
13 | 
14 | 		if (register && password === confirmPassword) {
15 | 			try {
16 | 				await authHandlers.signup(email, password);
17 | 			} catch (err) {
18 | 				console.log(err);
19 | 			}
20 | 		} else {
21 | 			try {
22 | 				await authHandlers.login(email, password);
23 | 			} catch (err) {
24 | 				console.log(err);
25 | 			}
26 | 		}
27 | 		if ($authStore.currentUser) {
28 | 			window.location.href = '/privatedashboard';
29 | 		}
30 | 	}
31 | </script>
32 | 
33 | <div class="container">
34 | 	<h1>{register ? 'Register' : 'Log in'}</h1>
35 | 	<form>
36 | 		<label>
37 | 			<input bind:value={email} type="email" placeholder="Email" />
38 | 		</label>
39 | 		<label>
40 | 			<input bind:value={password} type="password" placeholder="Password" />
41 | 		</label>
42 | 		{#if register}
43 | 			<label>
44 | 				<input bind:value={confirmPassword} type="password" placeholder="Confirm Password" />
45 | 			</label>
46 | 		{/if}
47 | 		<button on:click={handleSubmit}>Submit</button>
48 | 	</form>
49 | 	{#if register}
50 | 		<div
51 | 			on:click={() => {
52 | 				register = false;
53 | 			}}
54 | 			on:keydown={() => {}}
55 | 		>
56 | 			Already have an account?
57 | 			<p>Log in</p>
58 | 		</div>
59 | 	{:else}
60 | 		<div
61 | 			on:click={() => {
62 | 				register = true;
63 | 			}}
64 | 			on:keydown={() => {}}
65 | 		>
66 | 			Don't have an account? <p>Sign Up</p>
67 | 		</div>
68 | 		<div
69 | 			on:click={() => {
70 | 				authHandlers.resetPassword(email)
71 | 			}}
72 | 			on:keydown={() => {}}
73 | 		>
74 | 			Forgot Password?
75 | 		</div>
76 | 	{/if}
77 | </div>
78 | 
79 | <style>
80 | 	.container {
81 | 		display: flex;
82 | 		flex-direction: column;
83 | 		align-items: center;
84 | 		justify-content: center;
85 | 		flex: 1;
86 | 	}
87 | 
88 | 	.container form {
89 | 		display: flex;
90 | 		flex-direction: column;
91 | 	}
92 | </style>
93 | 


--------------------------------------------------------------------------------