This is my current flow:
I have a single page application where the user logs in. When they log in I save their accessToken:
const accessToken = await auth0Client.getTokenSilently();
In the browser storage. Then I have a chrome extension which picks up the token from the browser storage. The exntesion needs to send a request to an API endpoint /generate (which I added in the API section of the auth0 app). The same server code is serving the SPA for login and the /generate API endpoint. But when I pass along with the authToken I received after logging in to the /generate endpoint it says that it’s invalid. If I use the token provided in the “Test” section, that works.
So I’m unable to understand why the token given by the SPA isn’t valid for authenticating with the API.
Here’s my server.js:
const express = require("express");
const cors = require("cors");
const { join } = require("path");
const app = express();
const { auth, requiredScopes } = require("express-oauth2-jwt-bearer");
const checkJwt = auth({
audience: "http://localhost",
issuerBaseURL: "https://dev-csc8n75wcojtwxmv.us.auth0.com/",
tokenSigningAlg: "RS256",
});
app.use(express.json());
app.use(cors());
// 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"));
});
app.post("/generate", checkJwt, async (req, res) => {
const token =
req.headers.authorization && req.headers.authorization.split(" ")[1];
console.log(token);
// get/validate user details from token
const { prompt } = req.body;
// app specific code
});
// Listen on port 3000
app.listen(3000, () => console.log("Application running on port 3000"));
my app.js code:
let auth0Client = null;
const fetchAuthConfig = () => fetch("/auth_config.json");
const configureClient = async () => {
const response = await fetchAuthConfig();
const config = await response.json();
auth0Client = await auth0.createAuth0Client({
domain: config.domain,
clientId: config.clientId,
});
};
window.onload = async () => {
await configureClient();
updateUI();
const isAuthenticated = await auth0Client.isAuthenticated();
if (isAuthenticated) {
// show gated content
return;
}
const query = window.location.search;
if (query.includes("code=") && query.includes("state=")) {
await auth0Client.handleRedirectCallback();
updateUI();
window.history.replaceState({}, document.title, "/");
}
};
const updateUI = async () => {
const isAuthenticated = await auth0Client.isAuthenticated();
document.getElementById("btn-logout").disabled = !isAuthenticated;
document.getElementById("btn-login").disabled = isAuthenticated;
if (isAuthenticated) {
document.getElementById("gated-content").classList.remove("hidden");
const accessToken = await auth0Client.getTokenSilently();
document.getElementById("ipt-access-token").innerHTML = accessToken;
const message = {
type: "auth0_token",
token: accessToken,
};
window.postMessage(message, "*");
document.getElementById("ipt-user-profile").textContent = JSON.stringify(
await auth0Client.getUser()
);
} else {
document.getElementById("gated-content").classList.add("hidden");
}
};
const login = async () => {
await auth0Client.loginWithRedirect({
authorizationParams: {
redirect_uri: window.location.origin,
},
});
};
const logout = () => {
auth0Client.logout({
logoutParams: {
returnTo: window.location.origin,
},
});
};
Perhaps the use of