Use TypeScript to Build a Node API with Express
This tutorial walks you through building a simple and secure Node application using TypeScript, Express, and Okta.
Warren Fisher
Thanks very much for a great article. I am getting an error after the final set of instructions. When I attempt to add a new guitar I get the following in the console… Error:
“Request failed with status code 404"
exports http://localhost:30000/js/main.js:12:87
exports http://localhost:30000/js/main.js:14:134
"Di/a”]</module.exports>
David Neal
Hi Warren! With a 404 error, it sounds like you may have a route missing or a missing dependency. Have you tried cloning the sample project at https://github.com/oktadeve… ? You might compare your project with a copy of the finished sample to see where the difference might be. If you find the issue, please let me know!
Warren Fisher
Good suggestion David. I should have done that first.
רועי גולדנברג
Hi,
Thanks for the good article…
please note you can add also typescript classes to the req/res/next objections:
import * as express from “express”;
(req: express.Request,res: express.Response,next: express.NextFunction)
Thanks,
Royi
Tom Towkach
Hi,
Thanks for putting this out there. I got past the logging in, and database install, and rest of changes.
When I click submit, nothing happens. So, how do I go about debugging this? I guess writing to console isn’t an option.
I could get what’s in Git and see what changes, but that woudn’t help me get to debug the point of the error.
Any thoughts?
Matt Raible
Hey Tom,
Can you please compare your code with the example app on GitHub. You can use SmartSynchronize to compare directories.
Tom Towkach
Thanks for your help Matt. I cloned your code and it’s working now.
Giannis Kiriakou
i have a problem after implement the
authentication.i get an error : "C:\Users\user\Desktop\softwareEngineeringEdx\guitar-inventory\node_modules@okta\configuration-validation\dist\lib.js:96
throw new ConfigurationValidationError(‘Your appBaseUrl is missing.’);
^
Error: Your appBaseUrl is missing."
i double check my code and i dont find something different.
Matt Raible
If you add OKTA_ORG_URL to your .env file and define it as something like “https://{yourOktaDomain}”, does it work?
Giannis Kiriakou
yes i did that. i finally find the solution. the const oidc requires the parameter "appBaseUrl:“http://localhost:8080"” to work properly!
Daryn Holmes
Thanks. Does this do hot module replacement? Where if you change some ejs it will change in the browser without needed a refresh?
Giannis Kiriakou
yes it works 
thank you
Matt Raible
We released a new version of oidc-middleware (Express) package last month: https://github.com/okta/okt…
This is a new major version which does include breaking changes, including this new appBaseUrl parameter. We updated this post to reflect the version used (1.0.2).
Danylo MK
If you are working through this tutorial right now, make the following changes:
1) Install the latest version of oidc-middleware:
npm install @okta/oidc-middleware@2.0.0
2) Change oidc configuration in sessionAuth.ts:
// Create the OIDC client
const oidc = new ExpressOIDC({
appBaseUrl: process.env.HOST_URL,
client_id: process.env.OKTA_CLIENT_ID,
client_secret: process.env.OKTA_CLIENT_SECRET,
issuer: ${process.env.OKTA_ORG_URL}/oauth2/default,
scope: “openid profile”
});
Thanks for a great tutorial!
Matt Raible
We released a new version of oidc-middleware (Express) package last month: https://github.com/okta/okt…
This is a new major version which does include breaking changes, including this new appBaseUrl parameter. We updated this post to reflect the version used (1.0.2)
SomeGuy54321
I found vscode was complaining about req.logout() not being a property on the express.Request type. Installing @types/passport and assing "passport" to the "types" list of tsconfig.json fixed it.
Kc Sahoo
Works perfectly if one follows exact steps.
Only one change:
replace this part
<tbody>
<tr v-for=“guitar in guitars”>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<button id=“guitarDelete” @click=“confirmDeleteGuitar(guitar.id)” class=“btn-small”>deleteDelete</button>
</td>
</tr>
</tbody>
with
<tbody>
<tr v-for=“guitar in guitars”>
<td>{{guitar.year}}</td>
<td>{{guitar.brand}}</td>
<td>{{guitar.model}}</td>
<td>{{guitar.color}}</td>
<td>
<button id=“guitarDelete” @click=“confirmDeleteGuitar(guitar.id)” class=“btn-small”>deleteDelete</button>
</td>
</tr>
</tbody>
David Neal
If VS Code is complaining about req.logout(), it is probably because you have strongly-typed the request object, and logout() is not a function it recognizes. The logout() function is provided by the Okta OIDC middleware, not passport. Passport just happens to also add a logout() function to the request object. Hopefully, in the future we will have type definitions for Okta’s OIDC middleware. At which point, you will be able to add those type definitions and be able to strongly-type the request object. Hope this helps!
David Neal
The code sample has been updated, and also includes the name of the guitar in the delete confirmation message. Thanks for the feedback!