Oauth with Microsoft fails with error:
StytchAPIError: [400] oauth_auth_code_error
An error was encountered when exchanging the OAuth auth code. Please try again.
-
Azure application created following your guides.
-
B2B UI-component integrated in my webapp
-
Stytch Frontend sdk, redirects, organizations, etc configured.
-
webpage shows login box with Microsoft option
-
login works, redirect works
-
then a box is shown with the message: Looks like there was an error!
console shows:
StytchAPIError: [400] oauth_auth_code_error
An error was encountered when exchanging the OAuth auth code. Please try again.
Totally clueless as to what might be wrong. Have been testing and searching for hours now 
Hey Gerd – thanks for posting!
I just followed up on your previous email, but I’ll post here as well in case anyone else runs into this.
We appear to be receiving the following error from Microsoft:
AADSTS7000215: Invalid client secret provided. Ensure the secret being sent in the request is the client secret value, not the client secret ID
Could you please double check that you’ve input your Microsoft client secret correctly when setting up Microsoft OAuth in the Stytch Dashboard? I believe there is a separate value in Microsoft called the “client secret ID”, which is easy to grab by mistake instead of the client secret itself (I’ve done this before).
Let us know if that helps!
I double checked, that should be ok.
It was wrong a while ago, maybe the errors you see are older?
Received your e-mail.
So, both the domain and the organization url template should contain the slug value?
They both have now:
https://{{slug}}.example.com
https://{{slug}}.example.com:8080
Still same error
Hm, would you mind sending over a new request_id for one of your recent OAuth attempts? I’ll take another look!
Regarding the authorized domain error – would you mind sharing the exact/ full URL that the SDK UI is hosted on when you receive the error? Is it https://portal-docker.dodentocht.be:8080/sign-on exactly (https and not http, etc.)? Are you still receiving the same error code (endpoint_not_authorized_for_sdk)?
request-id-live-71b1dde9-9db6-4b82-8381-65f44ea7b360. —> 400
Right after that
request-id-live-71b1dde9-9db6-4b82-8381-65f44ea7b360 —> success
Just a few minutes ago
https://portal-docker.dodentocht.be:8080/sign-on
Is correct … it is hosted on a local docker environment for testing
I have also public versions:
https://portal-development.dodentocht.be/sign-on
https://portal-staging.dodentocht.be/sign-on
https://portal.dodentocht.be/sign-on
Those have the same issues
(I’ll publish the latest versions live in a few minutes to makes sure they are recent)
Hm, those requests seem to have resulted in the same “Invalid client secret” error from Microsoft. Would you mind going through the Microsoft OAuth setup guide again to double check that all of the values are set up correctly? For some reason, Microsoft is not accepting the client ID + client secret pair.
Strange, but all the events for that organisation (organization-live-f0bc2fa5-dba2-43a1-b21f-9102e2e46ff4) show success!
But still my webapp does not get a session
This is the code on the sign-on page
<q-pageclass=“flex flex-center”>
<divid=“stytch”/>
import { onMounted } from ‘vue’
import { dodentocht } from ‘src’
onMounted(() => {
dodentocht.stytch.mount({
elementId:‘#stytch’,
config: {
authFlowType:‘Organization’,
products: [‘oauth’],
sessionOptions: {
sessionDurationMinutes:dodentocht.config.sessionTimeout,
},
oauthOptions: {
signupRedirectURL:dodentocht.config.stytchRedirect,
loginRedirectURL:dodentocht.config.stytchRedirect,
providers: [‘microsoft’]
},
},
callbacks: {
onEvent: ({type, data }) => {
console.log(type,data)
},
onError: (data)=> {
console.log(data)
}
}
})
})
<stylelang="scss"scoped>
I’m wrong again … those events are much older … I do not get events at all for myportal.dodentocht.be organisation.
This is getting frustrating.
This is my setup.
I need RBAC, so I need to go with the B2B client.
I have 4 domains
https://portal-docker.dodentocht.be:8080
Running on my local machine, and …
https://portal-development.dodentocht.be
https://portal-staging.dodentocht.be
https://portal.dodentocht.be
All publicly reachable
I have created for each of them and organisation with the correct slug (portal-docker, portal-development, portal-staging and portal)
I have configured the redirect urls for all the domains
Configured OAuth and Frontend SDK.
Not sure what I have done wrong on the Stytch side.
Azure is configured following your instructions.
On the frontend side, I use the same public token for all organisations
But I configure the ui-mount with the correct redirect urls for the specific domain.
So … what should I look at next?
Thanks!
Your app setup seems correct to me at a high level, though I’ll note that we generally recommend using different Stytch projects for different internal environments (development, staging, etc.) rather than different Organizations within one project.
In the Stytch B2B model, an Organization is intended to correspond to a company/ tenant. An Organization can also correspond to a single user, if that user isn’t associated with a larger company (Organizations with one single Member don’t count towards your Monthly Active Organizations for billing purposes).
So, I’d generally expect to see several different Stytch projects within a Stytch workspace (one for each environment like development, staging, etc.) – each with different Organizations that correspond to individual companies or users.
That said, the specific error that you seem to be running into at the moment is an error from Microsoft indicating that the client ID and client secret you provided in the Stytch Dashboard are incorrect/ do not match. I don’t believe this is related to your implementation/ application code.
The first thing to check in this situation is usually that you copied the Value shown in the Microsoft UI when setting up the Client secret in the Stytch Dashboard, rather than the Secret ID.
If you’ve already confirmed that, then I’d recommend clicking the Try it out button on the Microsoft OAuth page in the Dashboard, to see if that works. That would be a helpful data point in terms of troubleshooting!
Ok, I have deleted al projects and started all over again.
There are now 4 workspaces each with 1 project and 1 organisation.
Checked and doubled checked, the workspace, project, organisation, redirect urls, oauth and and frontend sdk settings.
Created 4 different applications in azure, with the correct redirect url and made sure I had the correct client id and secret set in the auth settings.
Update my public token in de JavaScript frontend apps and deployed everything.
The problem remains, for all domains.
What else could be the problem?
My web app is a vue3 SPA … should PKCE be enabled? I played with that earlier, but it gave me worse errors. (It blocked the microsoft login process)
Thanks for your help,
I hope I can get this solved asap (I need to move on with my project
I noticed some permissions had been added.
I moved them to the configured permission-list, but this also did not change things.
Other permission required?
Other settings needed in my Azure application?
Problem solved!
My fault and will explain later … too busy now
Thanks for all the help
Cheers
Gerd
Hey Gerd – awesome, glad to hear you figured this out!
Just wanted to let you know that we’ve received your email about your Workspaces, and we’re currently looking into it. We’ll follow up on that email thread shortly.
