SvelteKit Web3 Login Tutorial

This tutorial was updated on 2023-01-02 09:45:33 -0300.

1. Introduction

In this tutorial, you will see how this web application is built:

https://paulojeronimo.com/sveltekit-web3-login

STATUS: This tutorial is a WORK IN PROGRESS. So, at this moment, it is an incomplete tutorial even though The final code is present.
To get a Git repository with all the steps presented in this tutorial, you will need to build it yourself because, at this moment, I will only share the Git repo of this tutorial with the participants of my Web3 mentoring. But, the steps followed in this tutorial will be available in a video on my Odysee channel. Please don’t ask me to share the entire Git repository as I won’t help you.

The link above shows you an application that offers two possibilities:

I wrote an additional tutorial where I followed some steps shown by the Moralis team (using React instead of SvelteKit) to achieve the web3 login feature done in this tutorial. Here is the running application produced by following the steps in this tutorial.

2. Setting up the tools you will need to follow this tutorial

To follow this tutorial you will need a modern Linux environment with some tools installed.

Expand this to read more about my Linux environment.

I’ll use a Linux Ubuntu 22.04 to follow the steps in here. You will need the following tools installed:

Node.js.
pnpm.
Visual Studio Code. Future updates of this tutorial will aggregate the use of devcontainers, a very useful tool.

These are the versions of the tools above, running on my environment:

$ node -v
v16.18.1

$ npm -v
8.19.2

Open a Bash shell on your environment and copy and paste the next commands to it.

To keep a better organization of your shell terminals, I recommend you to use the tmux.

Clone this tutorial to your local machine and change your current directory to it:

shell: default

repo=https://github.com/paulojeronimo/sveltekit-web3-login-tutorial;
git clone $repo && cd $(basename $repo)

If you intend only to run The final code you can skip directly to that session. Otherwise …

Install some Bash functions that you will execute on this tutorial:

shell: default

. ./functions.sh

Expand this to see the content of the functions.sh script.

functions.sh

#!/usr/bin/env bash

TUT_MARK='# SVELTEKIT_WEB3_LOGIN'
TUT_DIR=$(cd "$(dirname "$BASH_SOURCE[0]")"; pwd)
PROFILE=~/.bashrc

tut() {
  case "$1" in
    add)
      shift
      (cd "$TUT_DIR"/files; rsync -R $1 $OLDPWD)
      ;;
    apply)
      shift
      git apply "$TUT_DIR"/files/$1
      ;;
    uninstall)
      sed -i "/^$TUT_MARK/,+1d" $PROFILE
      ;;
    *)
      cd "$TUT_DIR"
  esac
}

if ! grep -q -e "^$TUT_MARK" $PROFILE
then
  echo "$TUT_MARK" >> $PROFILE
  echo ". $TUT_DIR/functions.sh" >> $PROFILE
fi

3. Creating the SvelteKit project

shell: default

pnpm create svelte@latest sveltekit-web3-login-private

Expand this to see my options when I ran the command above.

creating the sveltekit project

shell: default

cd sveltekit-web3-login-private && rm -f README.md

shell: default

pnpm i && \
git init && git add -A && \
git commit -m 'Initial commit'

Open another shell (I will name it as pnpm) and, inside it, type:

shell: pnpm

pnpm run dev -- --open

Open the default site: http://localhost:5173

4. Creating the 'About' page

4.1. Testing a simple change

01.diff

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5982b0a..2aebcde 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,2 +1,2 @@
 <h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<p>Visit <a href="https://paulojeronimo.com">paulojeronimo.com</a></p>

shell: default

tut apply 01.diff

shell: default

git add . && \
git commit -m 'Made a simple change'

4.2. Adding an 'About' page

02.diff

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2aebcde..3c0827f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,2 +1,2 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://paulojeronimo.com">paulojeronimo.com</a></p>
+<h1>SvelteKit Web3 Login</h1>
+<a href="/about">About</a>
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
new file mode 100644
index 0000000..8572216
--- /dev/null
+++ b/src/routes/about/+page.svelte
@@ -0,0 +1,3 @@
+<h1>About</h1>
+<p>A page to test Web3 login on SvelteKit.</p>
+<a href="/">Home</a>

shell: default

tut apply 02.diff

shell: default

git add . && \
git commit -m 'Added an About page'

5. Building static pages (Static Site Generation - SSG)

Stop vite on pnpm shell (by typing pCtrl+C) and add an new dependencie to the project:

shell: pnpm

pnpm i -D @sveltejs/adapter-static@latest svelte-preprocess && \
git add .

Optionally we can also uninstall @sveltejs/adapter-auto we the following command.
But for now let’s skip this step and continue this tutorial.

shell: pnpm

pnpm rm -D @sveltejs/adapter-auto

Update svelte.config.js:

03.diff

diff --git a/svelte.config.js b/svelte.config.js
index 87f198f..5cb2550 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,14 +1,18 @@
-import adapter from '@sveltejs/adapter-auto';
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import preprocess from 'svelte-preprocess';
+import adapter from '@sveltejs/adapter-static';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: vitePreprocess(),
+	preprocess: preprocess(),
 
 	kit: {
-		adapter: adapter()
+		adapter: adapter({
+			pages: 'build',
+			assets: 'build',
+			fallback: null
+		})
 	}
 };

shell: default

tut apply 03.diff && \
tut add src/routes/+layout.js

shell: pnpm

pnpm run build && tree build

Test the build locally:

shell: pnpm

serve -l 5173 build

Open https://localhost:5173

Commit all the changes:

shell: default

git add . && \
git commit -m 'Updated to SSG'

6. Deploy to GitHub Pages

Press Ctrl+C to stop the serve running on pnpm terminal.

Add gh-pages to package.json:

shell: pnpm

pnpm i -D gh-pages && \
git add package.json pnpm-lock.yaml

We’ll need to update svelte.config.js according to this diff:

04.diff

diff --git a/svelte.config.js b/svelte.config.js
index 5cb2550..b6eecf5 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -12,7 +12,10 @@ const config = {
 			pages: 'build',
 			assets: 'build',
 			fallback: null
-		})
+		}),
+		paths: {
+			base: process.env.NODE_ENV === 'production' ? '/sveltekit-web3-login' : ''
+		}
 	}
 };

shell: default

tut apply 04.diff

Also, we’ll need to update the pages.

First, src/routes/+page.svelte:

05.diff

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3c0827f..c71bcd1 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,2 +1,6 @@
+<script>
+  import { base } from '$app/paths';
+</script>
+
 <h1>SvelteKit Web3 Login</h1>
-<a href="/about">About</a>
+<a href="{base}/about">About</a>

shell: default

tut apply 05.diff

Then, src/routes/about/+pages.svelte:

06.diff

diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 8572216..ed1df81 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -1,3 +1,7 @@
+<script>
+  import { base } from '$app/paths';
+</script>
+
 <h1>About</h1>
 <p>A page to test Web3 login on SvelteKit.</p>
-<a href="/">Home</a>
+<a href="{base}/">Home</a>

shell: default

tut apply 06.diff

Finally, we’ll create a deploy script:

07.diff

diff --git a/package.json b/package.json
index 03f33b8..6d1339d 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,8 @@
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
+		"predeploy": "NODE_ENV=production npm run build",
+		"deploy": "touch build/.nojekyll && gh-pages -d build -t true",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",

shell: default

tut apply 07.diff

Now, let’s commit all theses changes.

shell: default

git add . && \
git commit -m 'Added gh-pages support'

To deploy on GitHub Pages, let’s first configure the origin for this repo.

Before executing this command, substitute my GitHub account (paulojeronimo) with yours or the next command will fail!

shell: default

repo=paulojeronimo/sveltekit-web3-login;
git remote add origin git@github.com:$repo.git &&
git repo set-default

Next, type the command below.

Note that you will need the GitHub CLI (gh) installed to this command succeeds!
If the repo sveltekit-web3-login already exists, you will need to delete it first with this command: gh repo delete --confirm. So, this will "undeploy" the project from GitHub Pages.

shell: default

gh repo create $repo --public && \
pnpm run deploy

Open https://paulojeronimo.com/sveltekit-web3-login.

Obviously, you will be using your own account. So the URL in your case will be different (https://your-name.github.io/sveltekit-web3-login).

7. Putting the redundant code in a layout file

The piece of redudant code in the pages above will be moved to a new file:

src/routes/+layout.svelte

<script>
  import { base } from '$app/paths';
</script>

<nav>
  <a href="{base}/">Home</a>
  <a href="{base}/about">About</a>
</nav>

<slot/>

After that we’ll need to remove that code that was redundant in the pages:

08.diff

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c71bcd1..fcfec57 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1 @@
-<script>
-  import { base } from '$app/paths';
-</script>
-
 <h1>SvelteKit Web3 Login</h1>
-<a href="{base}/about">About</a>
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index ed1df81..ae068f6 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -1,7 +1 @@
-<script>
-  import { base } from '$app/paths';
-</script>
-
 <h1>About</h1>
-<p>A page to test Web3 login on SvelteKit.</p>
-<a href="{base}/">Home</a>

So, let’s apply these changes:

shell: default

tut add src/routes/+layout.svelte && \
tut apply 08.diff

Start vite again and refresh http://localhost:5173 to note the changes:

shell: pnpm

pnpm run dev

Finally, commit the updates:

shell: default

git add . && \
git commit -m 'Created src/routes/+layout.svelte'

Type an Ctrl+C on the pnpm shell to add Sveltestrap.

shell: pnpm

pnpm i sveltestrap && \
git add .

9. Many other topics …

TODO

10. The final code

After completing all the steps followed in this tutorial (including the steps not yet documented), the final code and the instructions to put it running on GitHub Pages, are available in the directory "final-code" of this tutorial.

10.1. Running locally

First, you need to clone the repository of this tutorial. After that, copy and paste the following commands to your command line:

cd final-code && \
pnpm install && pnpm run dev

Open http://localhost:5173

10.2. Deploying to GitHub Pages

Inside the final-code directory, type:

npm run build && npm run deploy

SvelteKit Web3 Login Tutorial

1. Introduction

2. Setting up the tools you will need to follow this tutorial

3. Creating the SvelteKit project

4. Creating the 'About' page

4.1. Testing a simple change

4.2. Adding an 'About' page

5. Building static pages (Static Site Generation - SSG)

6. Deploy to GitHub Pages

7. Putting the redundant code in a layout file

8. Building a Navbar (using sveltestrap)

9. Many other topics …​

10. The final code

10.1. Running locally

10.2. Deploying to GitHub Pages

9. Many other topics …