User Registration
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:
Finish building the user registration form in
Home.svelte. We need to add password and password confirm fields to this form.Setup a Machine-to-Machine application in Auth0.
In
Home.svelte, make a call to a newPOST /usersendpoint.From the Express POST users endpoint, create the user in Auth0.
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.
On the next page, choose the Auth0 Management API and select the checkboxes for create:users and create:users_app_metadata.
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.
$ 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.
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:
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 POST /users 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": "[email protected]",
"password": "[email protected]",
"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:
This page is a preview of Fullstack Svelte