16 |
33 |
--------------------------------------------------------------------------------
/client/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "moduleResolution": "node",
4 | "module": "es2020",
5 | "lib": ["es2020"],
6 | "target": "es2019",
7 | /**
8 | svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
9 | to enforce using \`import type\` instead of \`import\` for Types.
10 | */
11 | "importsNotUsedAsValues": "error",
12 | "isolatedModules": true,
13 | "resolveJsonModule": true,
14 | /**
15 | To have warnings/errors of the Svelte compiler at the correct position,
16 | enable source maps by default.
17 | */
18 | "sourceMap": true,
19 | "esModuleInterop": true,
20 | "skipLibCheck": true,
21 | "forceConsistentCasingInFileNames": true,
22 | "baseUrl": ".",
23 | "allowJs": true,
24 | "checkJs": true,
25 | "paths": {
26 | "$lib/*": ["src/lib/*"]
27 | }
28 | },
29 | "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
30 | }
31 |
--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
1 | {
2 |
3 | "functions": {
4 | "source": "functions",
5 | "predeploy": [
6 | "npm --prefix \"$RESOURCE_DIR\" run lint",
7 | "npm --prefix \"$RESOURCE_DIR\" run build"
8 | ],
9 | "runtime": "nodejs14"
10 | },
11 | "database": {
12 | "rules": "./database.rules.json"
13 | },
14 | "hosting": {
15 | "public": "client/build",
16 | "ignore": [
17 | "firebase.json",
18 | "**/.*",
19 | "**/node_modules/**"
20 | ],
21 | "rewrites": [
22 | {
23 | "source": "**",
24 | "function": "sveltekit"
25 | }
26 | ]
27 | },
28 | "emulators": {
29 | "functions": {
30 | "port": 5002
31 | },
32 | "firestore": {
33 | "port": 8080
34 | },
35 | "database": {
36 | "port": 9000
37 | },
38 | "hosting": {
39 | "port": 5000
40 | },
41 | "pubsub": {
42 | "port": 8085
43 | }
44 | }
45 |
46 | }
47 |
--------------------------------------------------------------------------------
/client/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "~TODO~",
3 | "version": "0.0.1",
4 | "scripts": {
5 | "dev": "svelte-kit dev",
6 | "preview": "svelte-kit preview",
7 | "lint": "prettier --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
8 | "format": "prettier --write --plugin-search-dir=. .",
9 | "build": "npx rimraf client/build && svelte-kit build --verbose"
10 | },
11 | "devDependencies": {
12 | "@sveltejs/kit": "next",
13 | "@typescript-eslint/eslint-plugin": "^4.19.0",
14 | "@typescript-eslint/parser": "^4.19.0",
15 | "eslint": "^7.22.0",
16 | "eslint-config-prettier": "^8.1.0",
17 | "eslint-plugin-svelte3": "^3.2.0",
18 | "prettier": "~2.2.1",
19 | "prettier-plugin-svelte": "^2.2.0",
20 | "svelte": "^3.34.0",
21 | "svelte-adapter-firebase": "^0.7.4",
22 | "svelte-preprocess": "^4.0.0",
23 | "tslib": "^2.0.0",
24 | "typescript": "^4.0.0"
25 | },
26 | "type": "module"
27 | }
28 |
--------------------------------------------------------------------------------
/database.rules.json:
--------------------------------------------------------------------------------
1 | {
2 | "rules": {
3 | "following": {
4 | "$uid": {
5 | ".read": "auth != null",
6 | ".write": "auth.uid === $uid"
7 | }
8 | },
9 |
10 | "users": {
11 | ".read": true,
12 |
13 | ".indexOn": "username",
14 | "$uid": {
15 | ".write": "auth.uid === $uid",
16 | "username": {
17 | ".validate": "root.child('username_lookup/'+newData.val()).val() === auth.uid"
18 | }
19 | }
20 | },
21 |
22 | "username_lookup": {
23 | "$username": {
24 | // not readable, cannot get a list of usernames!
25 | // can only write if this username is not already in the db
26 | ".write": "!data.exists()",
27 | ".read": true,
28 |
29 | // can only write my own uid into this index
30 | ".validate": "newData.val() === auth.uid"
31 | }
32 | }
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/client/README.md:
--------------------------------------------------------------------------------
1 | # create-svelte
2 |
3 | Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte);
4 |
5 | ## Creating a project
6 |
7 | If you're seeing this, you've probably already done this step. Congrats!
8 |
9 | ```bash
10 | # create a new project in the current directory
11 | npm init svelte@next
12 |
13 | # create a new project in my-app
14 | npm init svelte@next my-app
15 | ```
16 |
17 | > Note: the `@next` is temporary
18 |
19 | ## Developing
20 |
21 | Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
22 |
23 | ```bash
24 | npm run dev
25 |
26 | # or start the server and open the app in a new browser tab
27 | npm run dev -- --open
28 | ```
29 |
30 | ## Building
31 |
32 | Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then:
33 |
34 | ```bash
35 | npm run build
36 | ```
37 |
38 | > You can preview the built app with `npm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production.
39 |
--------------------------------------------------------------------------------
/legacy/src/api.js:
--------------------------------------------------------------------------------
1 | let base = process.env.EMULATION
2 | ? "http://localhost:5002/svelte-fullstack-starter/us-central1"
3 | : "https://us-central1-svelte-fullstack-starter.cloudfunctions.net"
4 |
5 | function send({ method, path, data, token }) {
6 | const opts = { method, headers: {} }
7 |
8 | if (data) {
9 | opts.headers["Content-Type"] = "application/json"
10 | opts.body = JSON.stringify(data)
11 | }
12 |
13 | if (token) {
14 | opts.headers["Authorization"] = `Token ${token}`
15 | }
16 |
17 | return fetch(`${base}/${path}`, opts)
18 | .then((r) => r.text())
19 | .then((json) => {
20 | try {
21 | return JSON.parse(json)
22 | } catch (err) {
23 | return json
24 | }
25 | })
26 | }
27 |
28 | export function get(path, token) {
29 | return send({ method: "GET", path, token })
30 | }
31 |
32 | export function del(path, token) {
33 | return send({ method: "DELETE", path, token })
34 | }
35 |
36 | export function post(path, data, token) {
37 | return send({ method: "POST", path, data, token })
38 | }
39 |
40 | export function put(path, data, token) {
41 | return send({ method: "PUT", path, data, token })
42 | }
43 |
--------------------------------------------------------------------------------
/legacy/src/components/PersonalData.svelte:
--------------------------------------------------------------------------------
1 |
26 |
27 | List of Users
17 | 18 | {#await promise} 19 |No users yet!
27 | {/if} 28 | {:catch error} 29 |{error.message}
30 | {/await} 31 | 32 |Personal Settings
28 | 29 | 38 | {#if showSuccessMessage} 39 |Your Personal Data Settings have been updated.
40 | {/if} 41 | -------------------------------------------------------------------------------- /functions/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "functions", 3 | "scripts": { 4 | "lint": "tslint --project tsconfig.json", 5 | "build": "tsc", 6 | "watch": "tsc -w", 7 | "serve": "npm run build && firebase serve --only functions", 8 | "shell": "npm run build && firebase functions:shell -p 5001", 9 | "start": "npm run shell", 10 | "deploy": "firebase deploy --only functions", 11 | "logs": "firebase functions:log", 12 | "test": "mocha --reporter spec", 13 | "emulate": "firebase emulators:start --only database,functions --inspect-functions --import=./seed --export-on-exit ", 14 | "emulate:functions": "firebase emulators:start --only functions --inspect-functions" 15 | }, 16 | "engines": { 17 | "node": "10" 18 | }, 19 | "main": "lib/index.js", 20 | "dependencies": { 21 | "cors": "^2.8.5", 22 | "express": "^4.17.1", 23 | "firebase-admin": "^8.12.1", 24 | "firebase-functions": "^3.7.0" 25 | }, 26 | "devDependencies": { 27 | "@google-cloud/functions-framework": "^1.6.0", 28 | "firebase-functions-test": "^0.2.1", 29 | "mocha": "^8.0.1", 30 | "tslint": "^6.1.2", 31 | "typescript": "^3.9.5" 32 | }, 33 | "private": true 34 | } 35 | -------------------------------------------------------------------------------- /legacy/src/components/Email.svelte: -------------------------------------------------------------------------------- 1 | 26 | 27 | 36 | {#if showSuccessMessage} 37 |Your Email has been updated.
38 | {/if} 39 |40 | -------------------------------------------------------------------------------- /functions/src/index.ts: -------------------------------------------------------------------------------- 1 | import * as functions from "firebase-functions" 2 | 3 | const express = require("express") 4 | const cors = require("cors") 5 | 6 | const app = express() 7 | 8 | app.use(cors({ origin: true })) 9 | 10 | import * as admin from "firebase-admin" 11 | import { getSomeUsers } from "./users" 12 | 13 | admin.initializeApp() 14 | 15 | let sveltekitServer; 16 | exports.sveltekit = functions.https.onRequest(async (request, response) => { 17 | if (!sveltekitServer) { 18 | functions.logger.info("Initializing SvelteKit SSR Handler"); 19 | sveltekitServer = require("./sveltekit/index").default; 20 | functions.logger.info("SvelteKit SSR Handler initialised!"); 21 | } 22 | functions.logger.info("Requested resource: " + request.originalUrl); 23 | return await sveltekitServer(request, response); 24 | }); 25 | 26 | app.post("/", async (req, res) => { 27 | const { username, uid } = req.body 28 | try { 29 | await admin.database().ref(`usernames/${username}`).set({ uid: uid }) 30 | res.send("operation save username complete") 31 | } catch (e) { 32 | console.log(e.message) 33 | } 34 | }) 35 | 36 | export const upsertUsername = functions.https.onRequest(app) 37 | 38 | 39 | //todo figure out the best way to have multiple firebase functions (multiple express apps?) 40 | export const listUsers = functions.https.onRequest(async (req, res) => { 41 | res.set("Access-Control-Allow-Origin", "*") 42 | const data = await getSomeUsers(10) 43 | res.json(data) 44 | }) 45 | -------------------------------------------------------------------------------- /legacy/src/routeComponents/Signin.svelte: -------------------------------------------------------------------------------- 1 | 22 | 23 |
24 |
25 |
54 |
--------------------------------------------------------------------------------
/legacy/src/routeComponents/Recover.svelte:
--------------------------------------------------------------------------------
1 |
29 |
30 |
26 |
53 | Login Details
27 | 47 |48 | Forgot password? Click 49 | Here to reset it. 50 |
51 | 52 |
31 |
53 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "svelte-app",
3 | "version": "1.0.0",
4 | "scripts": {
5 | "deploy": "firebase use svelte-fullstack-starter && cd client && npm run build && cd ../ && firebase deploy",
6 | "deploy:staging": "firebase use staging && npm run build && firebase deploy",
7 | "start": "sirv public --single -p 5001",
8 | "lint": "eslint legacy/src "
9 |
10 | },
11 | "devDependencies": {
12 | "@rollup/plugin-commonjs": "13.0.0",
13 | "@rollup/plugin-node-resolve": "^8.1.0",
14 | "@rollup/plugin-replace": "^2.3.3",
15 | "dotenv": "^8.2.0",
16 | "eslint": "^7.3.1",
17 | "eslint-plugin-import": "^2.21.2",
18 | "eslint-plugin-node": "^11.1.0",
19 | "eslint-plugin-promise": "^4.2.1",
20 | "husky": "^4.2.5",
21 | "integrify": "^3.0.1",
22 | "prettier": "^2.0.5",
23 | "prettier-plugin-svelte": "^1.1.0",
24 | "rollup": "^2.18.1",
25 | "rollup-plugin-livereload": "^1.3.0",
26 | "rollup-plugin-svelte": "^5.2.3",
27 | "rollup-plugin-terser": "^6.1.0",
28 | "svelte": "^3.23.2"
29 | },
30 | "dependencies": {
31 | "firebase": "^7.15.5",
32 | "gotrue-js": "^0.9.25",
33 | "query-string": "^6.13.1",
34 | "sirv-cli": "^1.0.1",
35 | "svelte-loading-spinners": "0.0.19",
36 | "svelte-routing": "^1.4.2",
37 | "svelte-spinner": "^2.0.2"
38 | },
39 | "repository": {
40 | "type": "git",
41 | "url": "git+https://github.com/QuantumInformation/svelte-netlify-identity.git"
42 | },
43 | "keywords": [
44 | "svelte",
45 | "sveltejs",
46 | "fullstack"
47 | ]
48 | }
49 |
--------------------------------------------------------------------------------
/legacy/src/routeComponents/Register.svelte:
--------------------------------------------------------------------------------
1 |
34 |
35 | Request Account Recovery
32 | 45 | {#if showSuccessMessage} 46 |47 | An email has been sent if that account exists to allow you to log in one time. You will 48 | need to set your password immediately in order to log in again. 49 |
50 | {/if} 51 | 52 |
36 |
37 |
61 |
--------------------------------------------------------------------------------
/legacy/src/routeComponents/Settings.svelte:
--------------------------------------------------------------------------------
1 |
38 |
39 |
38 |
60 | Register
39 |Account Settings
40 | 49 | {#if pendingApiCall} 50 |54 | Well done! Your new account has been successfully created 🌱 Please check your email 55 | to verify your email and then you will be able to login. 56 |
57 | {/if} 58 | 59 |
42 |
43 |
47 |
71 | 47 |
Security Settings / Danger Zone
48 | 49 |Your Password has been updated.
68 | {/if} 69 | 70 |User Profile
46 | 47 | {#await promise} 48 |{user.username || 'User has not set a display name'}
52 | {#if isOwnProfile} 53 | It's you! 54 | {/if} 55 | 56 | {#if $userDataStore && !isOwnProfile} 57 | {#if isFollowing} 58 | 59 | {:else} 60 | 61 | {/if} 62 | {/if} 63 | {:catch error} 64 |error: {error}
65 | {/await} 66 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Why 2 | 3 | An SPA example for people to quickly start churning out fullstack apps in Svelte with firebase. 4 | The Svelte app uses JavaScript while the firebase functions use TypeScript 5 | 6 | # Videos! 7 | Best way to get up to speed is to watch these videos: 8 | 9 |
11 |
12 |
13 |
14 | # svelte app
15 |
16 | This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template.
17 |
18 | To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
19 |
20 | ```bash
21 | npx degit sveltejs/template svelte-app
22 | cd svelte-app
23 | ```
24 |
25 | *Note that you will need to have [Node.js](https://nodejs.org) installed.*
26 |
27 |
28 | ## Get started
29 |
30 | Install the dependencies...
31 |
32 | ```bash
33 | npm install
34 | ```
35 |
36 | ...then start [Rollup](https://rollupjs.org):
37 |
38 | ```bash
39 | npm run dev
40 | ```
41 |
42 | Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
43 |
44 | By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.
45 |
46 |
47 | ## Building and running in production mode
48 |
49 | To create an optimised version of the app:
50 |
51 | ```bash
52 | npm run build
53 | ```
54 |
55 | You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com).
56 |
57 | ## Running emulators
58 |
59 | Assuming you have firebase emulation for Realtime DB and Cloud functions you can pass this env variable in to run `EMULATION="true" npm run dev`
60 |
61 | And your production data will not be touched
62 |
63 | You can also get chrome to open up with no security as there are some cars issues with local emulation or functions with `npm run chrome`. You can then test the local app with the new Chrome window
--------------------------------------------------------------------------------
/legacy/src/App.svelte:
--------------------------------------------------------------------------------
1 |
13 |
14 |
35 |
36 | Svelte Firebase Starter
38 | 41 | {#if $userDataStore} 42 | {#if !$userDataStore.displayName && !$userDataStore.email} 43 |Please complete your profile in Settings
44 | {:else} 45 |Logged in as {$userDataStore.displayName || $userDataStore.email}
46 | {/if} 47 | {:else} 48 |Not logged in
49 | {/if} 50 | 77 |57 |
Username
58 | {#await personalDataPromise()} 59 |{error.message}
93 | {/await} 94 | -------------------------------------------------------------------------------- /functions/src/users.ts: -------------------------------------------------------------------------------- 1 | import * as admin from "firebase-admin" 2 | import UserRecord = admin.auth.UserRecord 3 | import ListUsersResult = admin.auth.ListUsersResult 4 | 5 | const totalUsers: any = [] 6 | /*export async function listAllUsers(nextPageToken: string) { 7 | try { 8 | // List batch of users, 1000 at a time. 9 | const listUsersResult = await admin.auth().listUsers(1000, nextPageToken) 10 | 11 | totalUsers.push(listUsersResult) 12 | listUsersResult.users.forEach(function(userRecord) { 13 | console.log("user", userRecord.toJSON()) 14 | }) 15 | if (listUsersResult.pageToken) { 16 | // List next batch of users. 17 | await listAllUsers(listUsersResult.pageToken) 18 | } 19 | const parsedUsers = totalUsers.users.map(stripUserSensitiveInfo) 20 | 21 | return parsedUsers 22 | } catch (error) { 23 | console.log("Error listing users:", error) 24 | throw new Error("Error users") 25 | } 26 | }*/ 27 | 28 | /** 29 | * Several steps here 30 | * 1 Get a list of registered users and strip them 31 | * 2 Create a list of queries with the uid's of the registered users to get data from the users object in the realtime DB 32 | * 3 Combine the uid from the registration DB with the custom data 33 | * 4 remove users with no username set (incomplete profile) 34 | * @param amount 35 | */ 36 | export async function getSomeUsers(amount: number) { 37 | try { 38 | /** Cached reference to '/users' in the database. */ 39 | const allUsersRef = admin.database().ref("users") 40 | /** An array of {uid, displayName} objects for each existing user */ 41 | const strippedUserRecords = await getStrippedUserRecords(amount) 42 | /** An array of Promises that resolve with a user's username */ 43 | const usernamePromises = strippedUserRecords.map((user) => { 44 | return allUsersRef 45 | .child(user.uid) 46 | .child("username") 47 | .once("value") 48 | .then