sveltekit-auth-example 1.0.37 → 1.0.38

package/.env-sample

@@ -1,8 +1,6 @@
 DATABASE_URL=postgres://REPLACE_WITH_USER:REPLACE_WITH_PASSWORD@localhost:5432/auth
 DOMAIN=http://localhost:3000
 JWT_SECRET=replace_with_your_own
-SEND_IN_BLUE_URL=https://api.sendinblue.com
-SEND_IN_BLUE_KEY=REPLACE_WITH_YOUR_OWN
-SEND_IN_BLUE_FROM='{ "email":"sender@example.com", "name":"First Last" }'
-SEND_IN_BLUE_ADMINS='{ "email":"admin@example.com", "name":"First Last" }'
+SENDGRID_KEY=replace_with_your_own
+SENDGRID_SENDER=replace_with_your_own
 PUBLIC_GOOGLE_CLIENT_ID=REPLACE_WITH_YOUR_OWN

package/CHANGELOG.md

@@ -1,6 +1,10 @@
 # Backlog
 * Add password complexity checking on /register and /profile pages (only checks for length currently despite what the pages say)
 
+# 1.0.38
+* Switch from SendInBlue to Sendgrid for email
+* Bump SvelteKit, adapter-node, and vite
+
 # 1.0.37
 * Bump SvelteKit, svelte-check, and a few dev dependencies
 

package/README.md

@@ -27,14 +27,14 @@ The website supports two types of authentication:
 
 > There is some overhead to checking the user session in a database each time versus using a JWT; however, validating each request avoids problems discussed in [this article](https://redis.com/blog/json-web-tokens-jwt-are-dangerous-for-user-sessions/) and [this one](https://scotch.io/bar-talk/why-jwts-suck-as-session-tokens). For a high-volume website, I would use Redis or the equivalent.
 
-The forgot password / password reset functionality uses a JWT and [**SendInBlue**](https://www.sendinblue.com) to send the email. You would need to have a **SendInBlue** account and set three environmental variables. Email sending is in /src/routes/auth/forgot.ts. This code could easily be replaced by nodemailer or something similar. Note: I have no affliation with **SendInBlue** (used their API in another project).
+The forgot password / password reset functionality uses a JWT and [**SendGrid**](https://www.sendgrid.com) to send the email. You would need to have a **SendGrid** account and set two environmental variables. Email sending is in /src/routes/auth/forgot.ts. This code could easily be replaced by nodemailer or something similar. Note: I have no affliation with **SendGrid** (used their API in another project).
 
 ## Prerequisites
 - PostgreSQL 14.5 or higher
 - Node.js 18.11.0 or higher
 - npm 9.1.1 or higher
 - Google API client
-- SendInBlue account (only used for emailing password reset link - the sample can run without it but forgot password will not work)
+- Twilio SendGrid account (only used for emailing password reset link - the sample can run without it but forgot password will not work)
 
 ## Setting up the project
 
@@ -55,15 +55,15 @@ psql -d postgres -f db_create.sql
 
 2. Create a **Google API client ID** per [these instructions](https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid). Make sure you include `http://localhost:3000`, `http://localhost` in the Authorized JavaScript origins and `http://localhost:3000/auth/google/callback` in the Authorized redirect URIs for your Client ID for Web application. ** Do not access the site using http://127.0.0.1:3000 ** - use `http://localhost:3000` or it will not work.
 
-3. Create an **.env** file at the top level of the project with the following values (substituting your own id and PostgreSQL username and password):
+3. [Create a free Twilio SendGrid account](https://signup.sendgrid.com) and generate an API Key following [this documentation](https://docs.sendgrid.com/ui/account-and-settings/api-keys) and add a sender as documented [here](https://docs.sendgrid.com/ui/sending-email/senders).
+
+4. Create an **.env** file at the top level of the project with the following values (substituting your own id and PostgreSQL username and password):
 ```bash
 DATABASE_URL=postgres://user:password@localhost:5432/auth
 DOMAIN=http://localhost:3000
 JWT_SECRET=replace_with_your_own
-SEND_IN_BLUE_URL=https://api.sendinblue.com
-SEND_IN_BLUE_KEY=replace_with_your_own
-SEND_IN_BLUE_FROM='{ "email":"jdoe@example.com", "name":"John Doe" }'
-SEND_IN_BLUE_ADMINS='{ "email":"jdoe@example.com", "name":"John Doe" }'
+SENDGRID_KEY=replace_with_your_own
+SENDGRID_SENDER=replace_with_your_own
 PUBLIC_GOOGLE_CLIENT_ID=replace_with_your_own
 ```
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sveltekit-auth-example",
   "description": "SvelteKit Authentication Example",
-  "version": "1.0.37",
+  "version": "1.0.38",
   "private": false,
   "author": "Nate Stuyvesant",
   "license": "https://github.com/nstuyvesant/sveltekit-auth-example/blob/master/LICENSE",
@@ -33,23 +33,24 @@
   },
   "engines": {
     "node": ">=18.11.0",
-    "npm": "^9.1.2"
+    "npm": "^9.1.3"
   },
   "type": "module",
   "dependencies": {
+    "@sendgrid/mail": "^7.7.0",
     "pg": "^8.8.0"
   },
   "devDependencies": {
     "@sveltejs/adapter-node": "latest",
     "@sveltejs/kit": "latest",
     "@types/bootstrap": "5.2.6",
-    "@types/google.accounts": "0.0.3",
+    "@types/google.accounts": "0.0.4",
     "@types/jsonwebtoken": "^8.5.9",
     "@types/pg": "^8.6.5",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
     "bootstrap": "^5.2.3",
-    "eslint": "^8.28.0",
+    "eslint": "^8.29.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "google-auth-library": "^8.7.0",
@@ -62,6 +63,6 @@
     "svelte-preprocess": "^4.10.7",
     "tslib": "^2.4.1",
     "typescript": "^4.9.3",
-    "vite": "^3.2.4"
+    "vite": "^3.2.5"
   }
 }

package/src/app.d.ts

@@ -17,10 +17,8 @@ declare namespace App {
     DATABASE_URL: string
     DOMAIN: string
     JWT_SECRET: string
-    SEND_IN_BLUE_URL: string
-    SEND_IN_BLUE_KEY: string
-    SEND_IN_BLUE_FROM: string
-    SEND_IN_BLUE_ADMINS: string
+    SENDGRID_KEY: string
+    SENDGRID_SENDER: string
   } 
 
 	interface PublicEnv { // $env/static/public
@@ -40,42 +38,6 @@ interface Credentials {
   password: string
 }
 
-interface MessageAddressee {
-  email: string
-  name?: string
-}
-
-interface Message {
-  sender?: MessageAddressee
-  to?: MessageAddressee[]
-  subject: string
-  htmlContent?: string
-  textContent?: string
-  tags?: string[]
-  contact?: Person
-}
-
-interface SendInBlueContact {
-  updateEnabled: boolean
-  email: string
-  emailBlacklisted: boolean
-  attributes: {
-    NAME: string
-    SURNAME: string
-  }
-}
-
-interface SendInBlueMessage extends Message {
-  sender: MessageAddressee
-  to: MessageAddressee[]
-}
-
-interface SendInBlueRequest extends RequestInit {
-  headers: {
-    'api-key': string
-  }
-}
-
 interface UserProperties {
   id: number
   expires?: string // ISO-8601 datetime

package/src/lib/server/sendgrid.ts

@@ -0,0 +1,17 @@
+import type { MailDataRequired } from '@sendgrid/mail'
+import sgMail from '@sendgrid/mail'
+import { env } from '$env/dynamic/private'
+
+export const sendMessage = async (message: Partial<MailDataRequired>) => {
+  const { SENDGRID_SENDER, SENDGRID_KEY } = env
+  try {
+    sgMail.setApiKey(SENDGRID_KEY)
+    const completeMessage = <MailDataRequired> {
+      from: SENDGRID_SENDER, // default sender can be altered
+      ...message
+    }
+    await sgMail.send(completeMessage)
+  } catch (errSendingMail) {
+    console.error(errSendingMail)
+  }
+}

package/src/routes/auth/forgot/+server.ts

@@ -1,9 +1,10 @@
-import type { RequestHandler } from './$types'
-import { JWT_SECRET, DOMAIN } from '$env/static/private'
 import type { Secret } from 'jsonwebtoken'
+import type { MailDataRequired } from '@sendgrid/mail'
+import type { RequestHandler } from './$types'
 import jwt from 'jsonwebtoken'
+import { JWT_SECRET, DOMAIN, SENDGRID_SENDER } from '$env/static/private'
 import { query } from '$lib/server/db'
-import { sendMessage } from '$lib/server/send-in-blue'
+import { sendMessage } from '$lib/server/sendgrid'
 
 export const POST: RequestHandler = async event => {
   const body = await event.request.json()
@@ -19,11 +20,12 @@ export const POST: RequestHandler = async event => {
     })
 
     // Email URL with token to user
-    const message: Message = {
-      to: [{ email: body.email }],
+    const message: MailDataRequired = {
+      to: { email: body.email },
+      from: SENDGRID_SENDER,
       subject: 'Password reset',
-      tags: ['account'],
-      htmlContent: `
+      categories: ['account'],
+      html: `
         <a href="${DOMAIN}/auth/reset/${token}">Reset my password</a>. Your browser will open and ask you to provide a
         new password with a confirmation then redirect you to your login page.
       `

package/src/lib/server/send-in-blue.ts

@@ -1,22 +0,0 @@
-import { SEND_IN_BLUE_KEY, SEND_IN_BLUE_URL, SEND_IN_BLUE_FROM, SEND_IN_BLUE_ADMINS } from '$env/static/private'
-
-const sender = <MessageAddressee> JSON.parse(SEND_IN_BLUE_FROM || '')
-const to = <MessageAddressee> JSON.parse(SEND_IN_BLUE_ADMINS || '')
-
-// POST or PUT submission to SendInBlue
-const submit = async (method: string, url: string, data: Partial<SendInBlueContact> | SendInBlueMessage) => {
-  const response: Response = await fetch(`${SEND_IN_BLUE_URL}${url}`, <SendInBlueRequest> {
-    method,
-    headers: {
-      'Content-Type': 'application/json',
-      'api-key': SEND_IN_BLUE_KEY
-    },
-    body: JSON.stringify(data)
-  })
-  if (!response.ok) {
-    console.error('Error from SendInBlue:', response)
-    throw new Error(`Error communicating with SendInBlue.`)
-  }
-}
-
-export const sendMessage = async (message: Message) => submit('POST', '/v3/smtp/email', { sender, to: [to], ...message })