I am trying to hit my azure functions application from React App which has authentication from google as external provider on top, so basically whenever a user hits the function user needs to be authenticated from google to get the response and if user is already authenticated it will just instead check and returns the response.
Scenario Flow Way to hit azure functions screenshot from Microsoft docs
- First I sign in using Azure AD B2C google sign in and get the idToken in response.
- Then I put the idToken value in body and request https://function-app-link/.auth/login/google for the authentication token which then will be required to hit the azure function properly by adding that in header as mentioned in that link : https://docs.microsoft.com/en-us/azure/app-service/overview-authentication-authorization
- Azure AD B2C Screenshot: Azure AD B2C User Flow
- Azure functions Screenshot: External Provider in Azure Functions Authentication
Issue 1. If I hit the function using the full idToken from Azure AD B2C which looks something like :
{"id_token":{"exp":1629906103,"nbf":1629902503,"ver":"1.0","iss":"<link>","sub":"","aud":"","nonce":"272fb63f-92fb-4b6f-b98e-0509a23a4b5c","iat":1629902503,"auth_time":1629902503,"idp_access_token":"ya29.a0ARrdaM_gdc8M3LwCr6bj9Q_uUPeBsLc0ubkMU62UKpCnEf-HZv9iqCtQ37-...s","given_name":"","family_name":"","name":"","idp":"google.com","oid":"b7f8b23f-b...","emails":["...."],"tfp":"B2C_1_..."}}
and my request looks something like this:
let body = { id_token: idToken };
let res = await fetch(
"https:function link/.auth/login/google",
{
method: "POST",
mode: "cors",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(body),
}
It returns me the error :
authPopup.js:69 POST https://function-link/.auth/login/google 400 (Invalid Client Credentials)
Keeping in mind this token was from Azure AD B2C google sign in which I get with the help of library "msal": "^1.4.11"
Issue 2. If I hit the function using the same request and just not use the idToken as whole and only the idp_access_token in it then i receive error :
Failed to load resource: the server responded with a status of 401 (Unauthorized)
Similar Issue reported here: Azure Function v2 google authentication with google
And above all, it works okay if you hit the link(https://functions app link/.auth/login/google) and it returns the authentication token in browser
Earlier Steps:
- Set Up Azure AD B2C and has Reply/ Redirect URL of Azure function app added in it.
- CORS Enabled on Azure functions and allowed redirect URL is setup to Localhost link where app is running.
- Above steps done as mentioned here but this one is for AAD so I followed steps for Google: https://docs.microsoft.com/en-us/archive/blogs/hmahrt/azure-active-directory-b2c-and-azure-functions
--- First question which rises in my mind is: Is it okay to use Azure AD B2C google sign in response(ID token) in request to Azure functions for getting authentication token?
--- If any of you have success hitting the azure functions( Google authenticated secure function) from node, react, javascript, typescript etc., Please guide me how I can request from my react app which uses Azure AD B2C google sign in to get the result of secured function by using the credentials return from Azure AD B2C or if there is any workaround.
If any detail is missing and you cannot get hold of the scenario I can explain further. Thanks.
