-
Initialize
index.qmd
-
Publish to GitHub Pages
-
Make a new project on
auth0.com
, select JavaScript as project type -
Use the
Download sample
box in the project set up dialogue. This will have options like this:
For Allows Callback URLs, Allowed Web Origins, and Allowed Logout URLs
http://localhost:3000
Make sure to also add this to the project page inside of auth0.com
. If
you already know the ultimate domain where the page is going to live,
you can add those domains here too, separated by commas.
- Install the Auth0 SPA SDK as a dependency
npm install --save @auth0/auth0-spa-js
and add the newly created node_modules/
to .gitignore
usethis::use_git_ignore("node_modules")
- Reference the CDN in
index.qmd
<script src="https://cdn.auth0.com/js/auth0-spa-js/1.20/auth0-spa-js.production.js"></script>
- Put the vanilla button content in
index.qmd
<p>Welcome to our page!</p>
<button id="btn-login" disabled="true" onclick="login()">Log in</button>
<button id="btn-logout" disabled="true" onclick="logout()">Log out</button>
- Add
public/css/main.css
and reference it in theindex.qmd
top yaml
.hidden {
display: none;
}
label {
margin-bottom: 10px;
display: block;
}
-
Add
public/js/app.js
and reference it in a script tag ofindex.qmd
-
Initialize
auth_config.json
in root with the info available in the project tab
{
"domain": "dev-vs2e5wst.us.auth0.com",
"clientId": "MLJu62ScBhbIG8fq73v5GEZb2LANoYeF"
}
- Initialize npm project and install dependencies
npm init -y
npm install express
- Install
nodemon
to restart server on code change
npm install -D nodemon
- Modify
package.json
to set up start and dev npm environments
{
// ...
"scripts": {
"start": "node server.js",
"dev": "nodemon server.js"
},
// ...
}
- Initialize
server.js
in root with
const express = require("express");
const { join } = require("path");
const app = express();
// Serve static assets from the /public folder
app.use(express.static(join(__dirname, "public")));
// Endpoint to serve the configuration file
app.get("/auth_config.json", (req, res) => {
res.sendFile(join(__dirname, "auth_config.json"));
});
// Serve the index page for all other requests
app.get("/*", (_, res) => {
res.sendFile(join(__dirname, "index.html"));
});
// Listen on port 3000
app.listen(3000, () => console.log("Application running on port 3000"));
- At this point, should be able to
npm start
ornpm run
to see the site on http://localhost:3000/