Tailwind Resources Logo Tailwind Resources
Sveltekit Web3auth screenshot

Sveltekit Web3auth

Author Avatar Theme by Cloudnativeentrepreneur
Updated: 16 Mar 2022
32 Stars

Web3 auth via JWTs for Sveltekit

Github

Categories

Svelte

Overview:

The Sveltekit + Web3auth project aims to integrate web3auth via MetaMask with a JWT Issuing auth server from a confidential client for use with APIs in Sveltekit. This integration allows for a seamless login process, with navigation to protected pages of the app not requiring a request to the Authorization Server. Sveltekit hooks take care of the client-side implementation, ensuring a smooth user experience.

Features:

  • Integration of web3auth via MetaMask with a JWT Issuing auth server.
  • Seamless login process without requiring a request to the Authorization Server for protected page navigation.
  • Use of Sveltekit hooks to handle the client-side implementation.

Installation:

  1. Clone or download the Sveltekit + Web3auth template from the repository: GitHub - CloudNativeEntrepreneur/sveltekit-web3auth-template
  2. Install the necessary dependencies by running the command npm ci in the project directory.
  3. Set up the server by using the provided server from GitHub - CloudNativeEntrepreneur/web3-auth-service.
  4. Create an .env file in the project root directory and add the following content:
VITE_WEB3AUTH_CLIENT_SECRET=[your_client_secret]
  1. Copy the src/routes/auth folder, src/config folder, src/hooks.ts file, and src/routes/__layout.svelte file from the sveltekit-web3auth source repository to the corresponding locations in your own SvelteKit project.
  2. Replace imports of $lib with sveltekit-web3auth.
  3. Optionally, copy the routes/graphql and routes/profile folders from the source repository to your own project and customize them as needed.
  4. Use the provided stores for auth information in your protected routes.

Summary:

The Sveltekit + Web3auth project provides a seamless integration of web3auth via MetaMask with a JWT Issuing auth server, enabling secure authentication within an API-driven Sveltekit application. The use of Sveltekit hooks simplifies the client-side implementation, ensuring a smooth and user-friendly login process. With easy-to-follow installation instructions, developers can quickly get started with this project and customize it to fit their specific requirements.