PKCE Auth Documentation?

We have a front end application written in Vue3, so we want to log into Speckle using the OAuth PKCE flow.

The docs:
Authentication - Speckle Docs

point you towards using the vwnd/speckle-auth package, but that package doesnt actually use PKCE as far as i can tell, because the calls to swop the auth code for a token passes the client secret as part of its call.

The section about doing it manually just tells you to swop the auth code for a token, but doesnt tell you how.

Is there any documentation that tells us what the REST API endpoints are for doing the PKCE worklflow, and the data you need to provide in each call?

Hi Jon

You can also check the REST API endpoints inside the implementation of the package, and implement it yourself.

  1. Authorization Code
    speckle-auth/src/lib.ts at 09134f7de00924b7d4dd952febfd30b49f7d1e26 · vwnd/speckle-auth · GitHub
  2. Authorization Code Exchange:
    speckle-auth/src/lib.ts at 09134f7de00924b7d4dd952febfd30b49f7d1e26 · vwnd/speckle-auth · GitHub

More on PKCE: Protecting Apps with PKCE - OAuth 2.0 Simplified

In that case, the Speckle team need to update the documentation because they talk about using PKCE, and are pointing and highly recommending to use a package that doesn’t actually do PKCE login.

If it is the same endpoint URLs used for PKCE, where and how do I provide the code challenge and code challenge method in the first call? In the url path? As parameters?

How do I provide the verifier code in the second call? Assuming it’s a POST request, is there a sample of what the body should look like?

Did you open the links above?

This is where you pass the challenge on the first request. This one is a redirect to start the flow, so no body.

This is where you pass the challenge on the second request (token)

The package does PKCE :slight_smile: but from your messages, I understand you probably has seen other flavours of PKCE. Speckle uses a simpler one, for the better or worse.

This is from the third link I shared with you

For “plain” methods, code_verifier and code_challenge means the same thing. :slight_smile:

Our use case here is for a vue3 application running on a users machine, so we cant have the client secret stored on the users machine to include in line 168 on the second screenshot above.

Is there a Speckle endpoint for exchanging the auth code for a token that does not require the client secret to be included?

If not, i guess the only option is i need to create my own API endpoint which the first stage can redirect back to. have this API exchange the auto code for a token, then get it to return the token to the user.

I was really hoping the PKCE that had been implemented on Speckle included the option not to require the client secret so i avoided having to create this extra API

1 Like

Can you try sending appSecret: this.clientId in the second request?

Doing that returns the error:

“Invalid app secret. Ensure the app secret is correct.”