When calling multiple external APIs from an application using Clerk for authentication, you need to ensure that each API request is properly authenticated and secured. Implementing authentication in Express or Node.js is crucial for ensuring your API's integrity, security, and reliable operation. This reassures you that your APIs are protected and functioning as intended.
In this tutorial, we'll explore how to use Clerk with Express to authenticate API requests using ClerkExpressWithAuth() and ClerkExpressRequireAuth() middleware, and build a secure and robust backend for your React application.
To following along with this article, make sure you have the following:
To secure multiple external APIs with your application and Clerk, you can use Clerk's authentication middleware to protect your API endpoints. Clerk provides middleware that can be used to authenticate requests to your API endpoints. This middleware can be applied to routes that need authentication, ensuring that only authenticated users can access these endpoints.
For Express applications, Clerk offers two middleware options:
ClerkExpressWithAuth(): This middleware attaches the authenticated user's session to the request object, allowing you to access user information in your route handlers.ClerkExpressRequireAuth(): This middleware ensures that only authenticated requests can access the protected routes and will throw an error if the request is not authenticated.Let's explore how both middlewares can be used with Express.
Start by opening an empty directory on your computer and initializing a new Node project with the following command:
Now open the package.json file and update it to add the "type": "module" setting as shown below:
Next, we need to install the following packages:
express is the web framework for Node.js we're going to use. Express is a great option for running Node servers because it's fast and minimal.cors allows us to easily call the endpoint from a clientdotenv is used to read environmental variables in Node.@clerk/clerk-sdk-node is the Node.js SDK for the Clerk user management platform.These can be installed by running the following command in the your terminal:
Once installation completes, find your CLERK_PUBLISHABLE_KEY & CLERK_SECRET_KEY in the Clerk dashboard on the Quickstart screen if this is a new application, or in the Configure tab in the sidebar under API keys.
Because you are building these routes on the backend, it is safe to include the CLERK_SECRET_KEY in your environment variables.
Finally, create a file named server.js and add the following code to it. Note that both Clerk middleware functions are being used on different routes to test the behavior of each. Below those routes is an error-handling middleware to address any errors that are thrown. If an error occurs in any middleware function that is run before the ClerkExpressRequireAuth middleware, this function will be called.
Let's start the API server by running the following command in the terminal:
You should now see that message from in your app.listen(…) terminal:
Postman is a tool that's used to dispatch requests to various endpoints and analyze the results. With Postman open, create a new request by selecting File > New. In the modal that appears, select HTTP as the request type.
In the URL field, type in http://localhost:3000/protected-auth-required and click Send. The results will be displayed in the Response tab like so:
While accessing the /protected-auth-required route without authentication will return a 401 response as defined in the error handling middleware, accessing the /protected-auth-optional route will return an empty JSON object instead. Feel free to create a new request in Postman and send the request.
This is the expected response:
Let's create a React app so we can add Clerk to it and test the API endpoints after being authenticated. Open an empty directory in your terminal and run the following command to initialize a new React app:
You'll be guided through a series of questions, use the following answers for each:
Next, run the following command to switch directories, install the dependencies, and launch the project:
You should now be able to open your browser to http://localhost:5173/ to access the React app.
Next, follow the Clerk React Quickstart Guide to add Clerk to the app you just created. Once done, replace the code in src/App.jsx to render the <SignInButton> if the user is not signed in, or the <UserButton> if they are:
Now click the Sign-in button and test that you can sign-in using your preferred method. After fully authenticating, the Sign-in button will be replaced with your avatar, which is the <UserButton> component.
Next, we'll update App.tsx again with the following changes. This code will add the useAuth hook provided by the Clerk React SDK, which contains the getToken function used to obtain the JWT for the currently authenticated user.
That token will be used in the Authorization header of the fetch requests to our API, each of which can be called by clicking the appropriate button that is rendered in the browser. Finally, we're storing the responses of each call in a data state and simply displaying that as a string in the browser.
In the browser, click each of the newly rendered buttons to display a payload similar to the following JSON on the page:
Authentication should be swift and efficient to ensure it gets done, rather than sitting in your backlog for months or leaving your endpoints vulnerable to attackers. By using Clerk Middlewares, In this case, ClerkExpressWithAuth() or ClerkExpressRequireAuth(), you can secure any endpoint and integrate authentication with Express without the complexity of building it from scratch.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。