API gateways such as those provided by GCP are great tools for developers who want to build APIs that are low maintenance and low latency. An API gateway provides developers with a scalable and secure entry point to their developed API services. When building an API with these tools, Passage can be used to authorize users for authenticated routes at the gateway-level. This requires no additional code to be written by developers - just some small additions to the API configuration YAML.
This guide will demonstrate how to implement GCP API Gateway authorization using Passage. For this example, we will use a Cloud Function to implement our API endpoints, but the implementation of the gateway is the same regardless of how you implement the endpoints. We will also use a simple React application for our frontend. You can find the code for that in our example repo on Github.
If you don’t have one already, create an account at https://console.passage.id/register. Create an app with the following settings:
Domain: http://localhost:3000 (or whatever domain your frontend runs on)
Redirect URL: /dashboard
Once the app is created, go to Settings → API Keys and create a new API Key. This will give you access to Passage’s management functionality from your API server. Make sure to save this key because you will need your API key and your App ID in this guide.
In the GCP Console, create a cloud function. This will server as our API server. For this example, we will have a single endpoint /user that fetches the user info from Passage and returns it.
In the “Secrets” section, add your Passage App ID and API key as environment variables to be able to references in the code.
Next, it’s time to write the Cloud Function. The endpoint will use the Passage Node SDK to fetch information about the authenticated user. It will not actually perform the authentication (that’s what the API gateway will do). Instead, it can access information about the authenticated JWT via the x-apigateway-api-userinfo header that is automatically set by the API gateway.
Note: Since the react app will access the API server cross-origin, we need to make sure to handle the OPTIONS requests. Usually the API gateway would do this, but GCP does not have full support for CORS headers at this time.
Finally, make sure to add the Passage Node SDK as a dependency.
Copy the “Trigger URL” of the Cloud Function so it can be used to set up routing from the API Gateway.
Next, we’ll need to create a new API Gateway which will relay authenticated requests to our Cloud Function and perform validation of the JWTs to protect the route. In GCP, you create an API config based on the OpenAPI specification that defines the routes and security controls for your API server. There a few key components of this API config.
Here is the full API config. Save this in a openapi-gw.yaml file.
Next, create a new gateway in the GCP Console and upload the API config for it. All other fields can stay as the default values.
Once the gateway is deployed, you now will be able to authenticate requests from your API Gateway using Passage!
Grab the API Gateway endpoint to add to the frontend application for testing. In your React app, add the following to a .env file.
If you are using our example app, then the app will automatically add a Passage Element for the App ID provided. The React app uses the Gateway URL provided to fetch the user information used to populate the dashboard once a user has logged in to the example app.
You will also notice that if you try to navigate to /dashboard without a valid auth token, you will get a 401 error, which is coming from the API gateway.
Passage makes it super easy to protect routes on your API server. Your users get a a great login experience with device-native biometrics and you as a developer don’t have to worry about handling authentication.
To learn more about Passage and biometric authentication for web applications, you can:
Passage is in beta and actively seeking feedback on the product. If you have feedback, bug reports, or feature requests, we would love to hear from you. You can email us at support@passage.id or fill out this form.