Cookie to Access Token

What is this project about?

The main goal of this project is to build a prototype framework on the Apigee Gateway that converts a cookie into an access token and also manages it without a Backend For Frontend. In modern web applications, clients can directly invoke APIs, interact with the authorization server and manage access tokens themselves.

However, there are strong opinions (based on a statement of the book “API Security in Action (2020)”, Neil Madden) that web applications should continue to use cookies and that only a server should interact with the authorization server, these opinions exist because a simple web client cannot keep secrets and therefore is not as safe to interact with the as authorization server.

Nowadays, if you want to use this method to secure APIs, you need something that can convert the cookie received from the client into an access token so that the server component (in this case the API) can understand it. For this, a Backend For Frontend is used, the BFF interacts with the authorization server and so on.

Why remove the Backend For Frontend?

By doing research about this topic we couldn’t really find a lot of pro’s and con’s about why you should use a Backend For Frontend or why you shouldn’t, this is why we formulated our own opinion about removing the BFF from the API Security when using an API Gateway.

We think that using a Backend For Frontend is not really necessary for converting the cookie to an access token, as we can achieve the same thing by using the Apigee Gateway. An API management tool like Apigee can manage our “cookies” and the access tokens or ID tokens received from the external Identity Provider.

OAuth2 Sequence with cookie creation

Available Features

• Cross Site Request Forgery protection
• Dynamic IDP settings (via app attributes on Apigee)
• Multiple IDP support (tested with Okta & Auth0)
• OpenID support
• Works with different JavaScript Frontend Frameworks (ReactJS, VueJs, ...)
• Supports the use of refresh tokens

Future implementation possibilities:

• PKCE (Proof Key for Code Exchange)
• Automated Testing
• Verify ID tokens against JWKS
• Verify Scopes & audiences

How to setup this project?

1. Download the repository
2. Navigate to the proxy-bundle folder
3. Zip the apiproxy folder
4. Create a proxy with this apiproxy.zip
   1. Go to Apigee
   2. Click on API Proxies
   3. Click on the top right button +Proxy
   4. Click on "Upload proxy bundle"
   5. Select the zip folder and give the proxy a name
   6. Click on Next & Create
   7. Deploy your proxy to the test or production environment
5. Create an API Product
   1. Go to Home page of Apigee
   2. Click on API Products
   3. Click on the top right button +API Product
   4. Fill in the necessary fields
   
   5. Under "API resources" click on "Add a proxy" and select your previous created proxy
   6. Click in the top right on Save
6. Create an Application
   1. On the left navigation click on "Publish -> Apps"
   2. Click on the top right button +App
   3. Fill in the necessary fields here aswell
   
   4. Under "credentials" click on the Add product and select your API Product
   5. In the section "Custom Attributes" add the following attributes
      • hosting_domain - (hostname of where the .css, .js, .png,... files are located on cloud storage)
      • idp.auth_endpoint - (endpoint of the external identity provider to start the OAuth2 flow, mostly .../auth or /authorize)
      • idp.client_id - (client_id of the application registered at the external identity provider)
      • idp.client_secret - (client_secret of the application registered at the external identity provider)
      • idp.host - (hostname of the external identity provider)
      • idp.redirect_uri - (callback_uri, some endpoint within your Apigee proxy)
      • idp.token_endpoint - (endpoint of the external identity provider to exchange the authorization code to an access token)
   6. Click on the top right button Create
   7. After you created the application, click in the top right on edit and add the last custom attribute to the application
      • send_back - (URL where Apigee needs to redirect the client to after successful authentication, it should end with ../app/your_app_key)
   8. Click on the top right button Save
   
7. Use the test web client application (1st Party)
   1. Navigate to the test-web-application folder and install the necessary packages (command line: npm install)
   2. Check if the endpoints inside the ./src/App.js are correct: inside the auth() function /testing/auth & in the getUserInfo() function /testing/userinfo if not, change them to the endpoint you are using inside the Apigee Proxy
   3. Build the project via the command line: npm run build
   4. Navigate to the build folder and copy these files and folders to your cloud storage (e.g Google Cloud Storage)
   5. You can now start the application via https://yourdomain.com/testing/app/your_apigee_app_key