Fullstack Svelte Course Overview

Introduction

Development Environment Setup

Initializing a Svelte Project

Setting up a Formatter and Linter

Setting Up A Development Environment

Single Page Application Routers

Front End Layouts

Front End Routing

Front End Component Libraries

Creating a Landing Page

Events and Input Bindings

User Interface Styles and Interactions

Initializing an Express Project

REST API Endpoints

School Lunch Data Model

Creating the Backend Application

Fetching Data with Axios

Svelte Each Blocks

Showing Loading Spinner Icons

Externalizing Frontend Configuration

Fetching Data in the Frontend

Installing PostgreSQL and Initial Setup

Knex Migrations

Using Knex with Express

Adding Post, Put and Delete Endpoints

Adding Persistence with PostgreSQL

Deleting Data with the Front End

Creating Data with the Front End

The Lunch Week Details Component

Creating, Updating and Deleting Data in the Frontend

JWT Based Security

Evolving the App to Multi Tenant

User Registration

Securing the Application

Public Lunch Week Page

Public Lunch Menu View

Building and Serving Svelte

Production Deployment

svelte

node.js

This course teaches all the major concepts you need to build a production ready SaaS application by step by step _building a fully functional application_. The course is divided into two main parts - the _frontend_, which uses Svelte to build an interactive, rich user interface and the _backend_, which uses Express and PostgreSQL to build a server that handles data management.

Svelte is an exciting new frontend UI framework that offers a very developer friendly workflow and easy to learn syntax. Express and PostgreSQL are tried-and-true technologies that provide a rock solid backend.

Across about 7 hours of video instruction with full source code, this course covers everything from setting up your development environment to securing your application with a multi-tenant architecture and ultimately deploying the application to production.

Build a Svelte app with Node.js, Express, and Postgresql

In this course, we'll be creating a full stack SaaS application with Svelte, Express and PostgreSQL

Fullstack Svelte

Persistence with a relational PostgreSQL database

Frontend create, read, update and delete operations

How to integrate Auth0 for JWT authentication

In the previous two lessons, we worked with Auth0 users, but we created them manually in the Auth0 dashboard. Now we need a way for users of our application to self register for the app. Additionally, since we have multi-tenant architecture, we'll need to prepare a database for each new user/school.

 call to the Auth0 management API. For the database part, we will use Knex to create a new database and migrate it to the latest state.

So far, our front end Svelte application has been integrated with Auth0 for login and redirect. If we want to use the Auth0 management API, then we need to setup a Machine to Machine application. This allows our backend API to interact with Auth0. One key reason for using a backend app to integrate with the management API is that it allows us to protect our Auth0 management secrets. Any frontend JavaScript run by the browser can be read by any user, so we never want to use secrets, API tokens, etc in a front end application.

Head over to the Auth0 dashboard and navigate to the Applications section. From here, choose 

 and select Machine to Machine applications. You can call it 

On the next page, choose the Auth0 Management API and select the checkboxes for 

 endpoint. This endpoint will work with non-authenticated users so that they can register for the app.

The first thing this endpoint needs to do is proxy frontend user registration requests over to the Auth0 management API to create users. We'll be using Axios, so you can go ahead and install it in the 

 file and delete the old GET users endpoint we created earlier.

In order to use the Auth0 management API, we first need to fetch a token. Let's start our new users POST endpoint by simply fetching the token and making sure that part works. We'll create a helper function called 

const express = require('express')
const router = express.Router()
const axios = require('axios')

const getAuth0AccessToken = async () => {
  const body = {
    grant_type: 'client_credentials',
    client_id: process.env.AUTH0_CLIENT_ID,
    client_secret: process.env.AUTH0_CLIENT_SECRET,
    audience: process.env.AUTH0_AUDIENCE,
  }
  const response = await axios.post(
    `${process.env.AUTH0_ISSUER}oauth/token`,
    body
  )
  return response.data.access_token
}

router.post('/', async function (req, res) {
  try {
    const token = await getAuth0AccessToken()
    res.send(token)
  } catch (e) {
    console.log(e)
    res
      .status(500)
      .send({ message: 'Error creating user', error: e.toString() })
  }
})

module.exports = router

You'll notice that we have introduced some additional environment variables. Update your 

 file to include the new variables and secrets. You can retrieve the AUTH0_CLIENT_SECRET from the Machine to Machine application in the Auth0 dashboard.

AUTH0_CLIENT_ID=<your machine to machine client id>
AUTH0_CLIENT_SECRET=<your machine to machine secret>

Give this endpoint a try in Postman. You can leave the POST body empty for now. You should see an access token returned:

Creating an Auth0 User Via the Management API

With an Auth0 access token now in hand, we can POST a user to the Auth0 API. We need to create a user object that conforms to the API with an email, password, connection and app meta-data. For our app meta data, we need to create a lower case DB name with spaces replaced with underscores. We can use a function for that:

const getDatabaseName = (schoolName) => {
  return schoolName.replace(/ /g, '_').toLowerCase()
}

We also need to configure our backend Axios instance to use the token. Here's the updated 

 method that will proxy a post request over to the Auth0 API:

router.post('/', async function (req, res) {
  const dbName = getDatabaseName(req.body.schoolName)
  try {
    const user = {
      email: req.body.email,
      password: req.body.password,
      connection: 'Username-Password-Authentication',
      app_metadata: {
        school_name: req.body.schoolName,
        school_database: dbName,
      },
    }

    const token = await getAuth0AccessToken()
    const config = {
      headers: { Authorization: `Bearer ${token}` },
    }
    const response = await axios.post(
      `${process.env.AUTH0_ISSUER}api/v2/users`,
      user,
      config
    )

    res.send(response.data)
  } catch (e) {
    console.log(e)
    res
      .status(500)
      .send({ message: 'Error creating user', error: e.toString() })
  }
})

You can test this iteration of the POST users endpoint again with Postman. This time you need to set a body in Postman with email, password and school name properties:

{
 "email": "test@test.com",
 "password": "dn@9dn93A",
 "schoolName": "Westside High"
}

Auth0 default password rules require a minimum of 8 characters and a mix of upper case and lower case letters and numbers or special characters. Make sure the password you are testing with conforms to these rules.

The last thing we need to accomplish with the POST users endpoint is creating, registering and migrating a new tenant database. We need to create a new database for the user and migrate it to the latest DB schema to create the tables and columns. We also need to register the database on the 

 table so that we can maintain it over time with our startup script.

---
title: User Registration
description: User Registration
privateVideoUrl: https://fullstack.wistia.com/medias/vphsk0xe33
isPublicLesson: false
---

### User Registration

In the previous two lessons, we worked with Auth0 users, but we created them manually in the Auth0 dashboard. Now we need a way for users of our application to self register for the app. Additionally, since we have multi-tenant architecture, we'll need to prepare a database for each new user/school.

For the Auth0 part, we will make a _machine-to-machine_ call to the Auth0 management API. For the database part, we will use Knex to create a new database and migrate it to the latest state.

Here's the overall plan:

1.  Finish building the user registration form in `Home.svelte`. We need to add password and password confirm fields to this form.
2.  Setup a Machine-to-Machine application in Auth0.
3.  In `Home.svelte`, make a call to a new `POST /users` endpoint.
4.  From the Express POST users endpoint, create the user in Auth0.
5.  If creating the user is successful, create a new database for the school and migrate it to the latest DB state.

### Auth0 Machine to Machine Applications

So far, our front end Svelte application has been integrated with Auth0 for login and redirect. If we want to use the Auth0 management API, then we need to setup a Machine to Machine application. This allows our backend API to interact with Auth0. One key reason for using a backend app to integrate with the management API is that it allows us to protect our Auth0 management secrets. Any frontend JavaScript run by the browser can be read by any user, so we never want to use secrets, API tokens, etc in a front end application.

Head over to the Auth0 dashboard and navigate to the Applications section. From here, choose **Create Application** and select Machine to Machine applications. You can call it `school-lunch-backend`.

![create-machine-to-machine-application](https://d2uusema5elisf.cloudfront.net/courses/fullstack-svelte/module_08/lesson_08.03/public/create-machine-to-machine.png)

On the next page, choose the Auth0 Management API and select the checkboxes for **create:users** and **create:users_app_metadata**.

![authorization-checkboxes](https://d2uusema5elisf.cloudfront.net/courses/fullstack-svelte/module_08/lesson_08.03/public/authorization-checkboxes.png)

### Express POST Users

We need a public Express `POST /users` endpoint. This endpoint will work with non-authenticated users so that they can register for the app.

The first thing this endpoint needs to do is proxy frontend user registration requests over to the Auth0 management API to create users. We'll be using Axios, so you can go ahead and install it in the _backend project_.

```shell
$ npm install axios
```

Open the backend `routes/users.js` file and delete the old GET users endpoint we created earlier.

In order to use the Auth0 management API, we first need to fetch a token. Let's start our new users POST endpoint by simply fetching the token and making sure that part works. We'll create a helper function called `getAuth0AccessToken()` that returns the token.

```js
const express = require('express')
const router = express.Router()
const axios = require('axios')

const getAuth0AccessToken = async () => {
  const body = {
    grant_type: 'client_credentials',
    client_id: process.env.AUTH0_CLIENT_ID,
    client_secret: process.env.AUTH0_CLIENT_SECRET,
    audience: process.env.AUTH0_AUDIENCE,
  }
  const response = await axios.post(
    `${process.env.AUTH0_ISSUER}oauth/token`,
    body
  )
  return response.data.access_token
}

router.post('/', async function (req, res) {
  try {
    const token = await getAuth0AccessToken()
    res.send(token)
  } catch (e) {
    console.log(e)
    res
      .status(500)
      .send({ message: 'Error creating user', error: e.toString() })
  }
})

module.exports = router
```

You'll notice that we have introduced some additional environment variables. Update your `.env` file to include the new variables and secrets. You can retrieve the AUTH0_CLIENT_SECRET from the Machine to Machine application in the Auth0 dashboard.

New variables for the `.env` file:

```shell
AUTH0_CLIENT_ID=<your machine to machine client id>
AUTH0_CLIENT_SECRET=<your machine to machine secret>
```

Give this endpoint a try in Postman. You can leave the POST body empty for now. You should see an access token returned:

![postman-token](https://d2uusema5elisf.cloudfront.net/courses/fullstack-svelte/module_08/lesson_08.03/public/postman-token.png)

### Creating an Auth0 User Via the Management API

With an Auth0 access token now in hand, we can POST a user to the Auth0 API. We need to create a user object that conforms to the API with an email, password, connection and app meta-data. For our app meta data, we need to create a lower case DB name with spaces replaced with underscores. We can use a function for that:

```js
const getDatabaseName = (schoolName) => {
  return schoolName.replace(/ /g, '_').toLowerCase()
}
```

We also need to configure our backend Axios instance to use the token. Here's the updated `POST /users` method that will proxy a post request over to the Auth0 API:

```js
router.post('/', async function (req, res) {
  const dbName = getDatabaseName(req.body.schoolName)
  try {
    const user = {
      email: req.body.email,
      password: req.body.password,
      connection: 'Username-Password-Authentication',
      app_metadata: {
        school_name: req.body.schoolName,
        school_database: dbName,
      },
    }

    const token = await getAuth0AccessToken()
    const config = {
      headers: { Authorization: `Bearer ${token}` },
    }
    const response = await axios.post(
      `${process.env.AUTH0_ISSUER}api/v2/users`,
      user,
      config
    )

    res.send(response.data)
  } catch (e) {
    console.log(e)
    res
      .status(500)
      .send({ message: 'Error creating user', error: e.toString() })
  }
})
```

You can test this iteration of the POST users endpoint again with Postman. This time you need to set a body in Postman with email, password and school name properties:

```js
{
 "email": "test@test.com",
 "password": "dn@9dn93A",
 "schoolName": "Westside High"
}
```

> Auth0 default password rules require a minimum of 8 characters and a mix of upper case and lower case letters and numbers or special characters. Make sure the password you are testing with conforms to these rules.

### Creating and Migrating a Tenant Database

The last thing we need to accomplish with the POST users endpoint is creating, registering and migrating a new tenant database. We need to create a new database for the user and migrate it to the latest DB schema to create the tables and columns. We also need to register the database on the `catalog.schools` table so that we can maintain it over time with our startup script.

Let's import Knex and add a `createDatabase` function:

```js
const knex = require('knex')

....

const createDatabase = async (databaseName, schoolName) => {
  const knexConfig = {
    client: 'postgresql',
    connection: {
      database: 'catalog',
      host: process.env.PG_HOST,
      user: process.env.PG_USER,
      password: process.env.PG_PASSWORD,
    },
  }

  // first create a new database
  const knexCatalogDb = knex(knexConfig)
  await knexCatalogDb.raw(`create database ${databaseName}`)

  // register the new database in the catalog.schools table
  await knexCatalogDb('schools').insert({ school_database: databaseName, school_name: schoolName })

  // create a new connection to the new database
  // and migrate it to latest
  knexConfig.connection.database = databaseName
  const tenantKnex = knex(knexConfig)
  await tenantKnex.migrate.latest({
    directory: './database/app_migrations',
  })
}
```

After the Axios POST, call the new `createDatabase` function:

```js
router.post('/', async function (req, res) {
  const dbName = getDatabaseName(req.body.schoolName)
  try {
    const user = {
      email: req.body.email,
      password: req.body.password,
      connection: 'Username-Password-Authentication',
      app_metadata: {
        school_name: req.body.schoolName,
        school_database: dbName,
      },
    }

 somehowtheblankspacesdisappear whenI type in this input:Theregistefunctioappearstwice_inthecodeblock

Thank you for letting me know, I removed the duplicate code. 

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Fullstack Svelte

Module 1: Introduction

Introduction:

Start Here

Introduction: (5:23)

Fullstack Svelte Course Overview

Module 2: Setting Up A Development Environment

Lesson 1: (4:12)

Development Environment Setup

Lesson 2: (7:04)

Initializing a Svelte Project

Lesson 3: (9:25)

Setting up a Formatter and Linter

Module 3: Front End Routing

Lesson 1: (20:16)

Single Page Application Routers

Lesson 2: (11:36)

Front End Layouts

Module 4: User Interface Styles and Interactions

Lesson 1: (6:15)

Front End Component Libraries

Lesson 2: (6:38)

Creating a Landing Page

Lesson 3: (13:47)

Events and Input Bindings

Module 5: Creating the Backend Application

Lesson 1: (16:48)

Initializing an Express Project

Lesson 2: (10:52)

REST API Endpoints

Lesson 3: (13:47)

School Lunch Data Model

Module 6: Fetching Data in the Frontend

Lesson 1: (14:34)

Fetching Data with Axios

Lesson 2: (10:59)

Svelte Each Blocks

Lesson 3: (6:36)

Showing Loading Spinner Icons

Lesson 4: (5:31)

Externalizing Frontend Configuration

Module 7: Adding Persistence with PostgreSQL

Lesson 1: (7:18)

Installing PostgreSQL and Initial Setup

Lesson 2: (12:37)

Knex Migrations

Lesson 3: (15:32)

Using Knex with Express

Lesson 4: (21:57)

Adding Post, Put and Delete Endpoints

Module 8: Creating, Updating and Deleting Data in the Frontend

Lesson 1: (22:32)

Deleting Data with the Front End

Lesson 2: (9:45)

Creating Data with the Front End

Lesson 3: (28:42)

The Lunch Week Details Component

Module 9: Securing the Application

Lesson 1: (37:19)

JWT Based Security

Lesson 2: (35:05)

Evolving the App to Multi Tenant

Lesson 3: (36:25)

User Registration

Module 10: Public Lunch Menu View

Lesson 1: (20:35)

Public Lunch Week Page

Module 11: Production Deployment

Lesson 1: (13:35)

Building and Serving Svelte

Lesson 2: (23:56)

Production Deployment

User Registration