SvelteKit Authentication Example

This is an example of how to sign up, sign in, authenticate, send PIN code by email, sign in with Google and sign in with Twitter.

Sign up

This project does not have a sign up process. If the account does not exist in the database when you sign in, it will be created automatically.

Sign in

You can sign in with only your email address and PIN code. To confirm your email address, this project will email you a PIN code. You can also sign in with Google and sign in with Twitter.

1. Local accounts via email
2. Sign in with Google
3. Sign in with Twitter

Prerequisites

• MySQL Community Server 8.0.30 or higher
• Node.js 18.4.0 or higher
• npm 8.13.2 or higher
• Gmail account for sendmail

Prerequisites for signing in with Google (option)

• Google API client ID and setup

Prerequisites for signing in with Twitter (option)

• Twitter developer account and setup

Setting up the Gmail for sending PIN code by email

1. Visit Google Account - Security
2. Turn on 2-Step Verification
3. Create an app password

Setting up the project

Here are the steps:

1. Get the project and setup:

# Clone the repo to your current directory
git clone https://github.com/sinProject-Inc/sveltekit-authentication-example.git

# Install the dependencies
cd /sveltekit-authentication-example
npm install

2. Create a database named sveltekit_authentication
3. Create a .env file by copying .env.example at the top level of the project
4. rewrite the env file:

DATABASE_URL="mysql://user:password@localhost:3306/sveltekit_authentication"

GMAIL_USER="username@gmail.com"
GMAIL_PASS="google_app_password"

TWITTER_CLIENT_ID="(option)"
TWITTER_CLIENT_SECRET="(option)"

5. Push the initial schema to the database:

npx prisma db push

Run locally

# Start the server and open the app in a new browser tab
npm run dev -- --open

Insert initial data only for the first time

Insert roles and lifetimes settings:

visit http://localhost:5173/initialize_database

How to sign in

1. Visit sign in page
2. Enter your email address
3. Check your PIN code in your emails
4. Enter PIN code

My ask of you

Please report any issues here. Pull requests are encouraged especially as SvelteKit is evolving rapidly.