Porting app from react-azure-adb2c to react-aad - reactjs

I am using Azure AD B2C. I need some react library to authenticate users in my react.js app.
I started with react-azure-adb2c. Primary scenarios like login and logout worked well for me. However, the library owner stopped supporting the library, so I need to find other one.
Experimenting with react-aad.
I used the example and got nice page that suggests popup or redirect login. However, both do not work. Most likely my configuration contains errors.
If I do not provide authority, I get microsoft auth page, not for my tenant. If I provide 'https://x5aaas.b2clogin.com/x5aaas.onmicrosoft.com', as directed by this post, i see error in console "endpoints_resolution_error:Endpoints cannot be resolved".
It seems there are some configuration mistakes:
provider={
new MsalAuthProviderFactory({
authority: 'https://x5aaas.b2clogin.com/x5aaas.onmicrosoft.com',
clientID: 'a1568977-3095-4bf6-a6d6-c10c87658488',
scopes: ['https://x5aaas.onmicrosoft.com/ui/use'],
type: LoginType.Redirect,
persistLoginPastSession: true,
postLogoutRedirectUri: window.origin.location,
})
}
I use basic react app with type script, created with
npx create-react-app <appName> --typescript
What can be wrong here?

The value of the authority is not correct. You should use https://login.microsoftonline.com/tfp/<your-tenant-name>.onmicrosoft.com/<your-sign-in-sign-up-policy>
The value of your-sign-in-sign-up-policy is the name of the policy.

Related

Trouble authorizing access to App Engine via IAP

I currently have App Engine up and running, protected by IAP, and my eventual aim is to have this be triggered by an Apps Script project. I've tested the code without IAP and it works fine. However, I'm running into difficulties successfully authorizing access to it when IAP is enabled.
I've added myself as an IAP-secured Web App User (as well as Policy Admin) to the App Engine, but whenever I try triggering it from a GSheets Apps Script where I'm the owner and it's associated with the correct GCP project (using this great explanation as a guide) I get the following:
"Invalid IAP credentials: JWT audience doesn't match this application ('aud' claim (1084708005908-bk66leo0dnkrjsh276f0rgeoq8ns87qu.apps.googleusercontent.com) doesn't match expected value (1084708005908-oqkn6pcj03c2pmdufkh0l7mh37f79po2.apps.googleusercontent.com))"
I've tried adding/removing various permissions to my account, as well creating a new Apps Script and re-adding to the project, but to no avail. I run into the same issue when triggering from CLI, so I'm fairly sure it's an issue with authentication, however this is my Apps Script code in case it helps:
function test() {
const options = {
headers: {'Authorization': 'Bearer ' + ScriptApp.getIdentityToken()},
muteHttpExceptions: true
}
var result = UrlFetchApp.fetch('https://APP-ENGINE-URL.appspot.com', options);
Logger.log(result);
}
And the manifest file:
{
"timeZone": "Europe/London",
"dependencies": {
},
"exceptionLogging": "STACKDRIVER",
"runtimeVersion": "V8",
"oauthScopes": ["openid", "https://www.googleapis.com/auth/script.external_request"]
}
Any help on this is super appreciated! Never posted here before, but pretty desperate and couldn't find anyone with this exact problem on SO.
Consideration
The problem with your solution is that you are using the identity of an auto-generated OAuth Client for Apps Script. This clients are not suitable for this kind of authentication, here a complete list of supported OAuth clients.
Solution
In order to complete your authentication you will need an extra step. You will have to create another OAuth Client and build an identity token with its credentials.
To make things easier I would recommend to use this Apps Script library: https://github.com/gsuitedevs/apps-script-oauth2
The inital Set-up is covered in the linked documentation.
Important: When creating the OAuth Client take note of the ClientID and the Client-secret. Plus, you will need to add an Authorized Redirect URI. This is standard when using the OAuth2 GAS library and it has this form: https://script.google.com/macros/d/{Your Apps Script ID}/usercallback
Now you have all the necessary information to build your identity token. In the Github repository there is a boilerplate sample that will cover the first coding steps with the OAuth2 GAS library.
Here is the link.
Copy this code to your Apps Script project and follow the instructions in the comments. You will need to add an extra OAuth scope: "https://www.googleapis.com/auth/userinfo.email".
Once you set all the constants with your OAuth clients information you should run the run() function from your Apps Script editor. This will log a URL you have to open in your browser to authorize your App. Once you authorized the App run again the run() function and you will successfully access your IAP protected application.
References
OAuth2 GAS library
IAP programmatic authentication

Microsoft Graph appRoleAssignment direct queries not supported?

I've been using these github documentation pages: Page1, Page2, I've implemented adal on the app that I'm using and I'm just logging the token on the console so that I can just copy-paste the token into postman and try requests faster.
I've been trying a get request as mentioned on the documentation to.
https://graph.microsoft.com/beta/appRoleAssignments/{Object Id of AD App} or { App ID of AD App }
But also attempted various other routes based on the documention. I'm getting 'resource not found' for all of the other ones and 'direct queries to this resource type are not supported' for the one above.
Brosed a few related stackoverflow threads and went into github issues to see anything related to approlesassignment resource type but no luck.
EDIT: Token is obtained in Angular app using package adal-angular4 (it is however an angular6 application and the package has been updated to work with Angular 6)
After a lot of struggling, I managed to get the necessary info via Azure Enterprise App API, not th endpoints mentioned above.
This is how the GET request looks like:
https://graph.microsoft.com/beta/servicePrincipals/{ID}/appRoleAssignments/
ID in the context above is "Object ID" of the Azure AD App under 'ENTERPRISE APPS', taking the one from under 'enterprise apps' is critical.
You'll find it in:
In Azure > Active Directory > Enterprise Apps > Your App > Properties
Now you just need bearer authentication token in the header for Microsoft Graph and the right permissions, I think Read/write all directory data should be good enough.

Change display name for firebase google auth provider

I am trying to display the name of my website on AuthO popups. No issues with Facebook, Twitter or GitHub auth. But Google's popup keep showing 'Sign in to continue to projectName.firebase.com' Instead of 'example.com'.
I mean it shows firebase's default domain instead of custom one.
Even if I change display name to some custom name in console.developers.google.com.
In the newest version of Firebase user guide they explain how to fix this, by pointing authDomain initialization property to your domain, and making a few other preparations: https://firebase.google.com/docs/auth/web/google-signin#customizing-the-redirect-domain-for-google-sign-in
Create a CNAME record for your custom domain that points to your project's subdomain on firebaseapp.com:
auth.custom.domain.com CNAME my-app-12345.firebaseapp.com
Add your custom domain to the list of authorized domains in the Firebase console: auth.custom.domain.com.
In the Google developer console or OAuth setup page, whitelist the URL of the redirect page, which will be accessible on your custom domain: https://auth.custom.domain.com/__/auth/handler.
When you initialize the JavaScript library, specify your custom domain with the authDomain field
Update: one important detail that's missing from the instructions is that the custom auth domain must be configured for Firebase Hosting (i.e. add it to the list of custom domains for Hosting on the Firebase Console). Otherwise you will get a certificate mismatch error as #AmritanshSinghal correctly points out.
Ok, for those following these instructions and running into issues, I have two other pieces of advice.
In the Google developer console or OAuth setup page, whitelist the URL of the redirect page, which will be accessible on your custom domain: https://auth.custom.domain.com/__/auth/handler.
This was really confusing to me. Here is where to do that.
Once you do all of this, you'll then get a CERT failure. Follow the instructions on this stackoverflow issue, wait a few hours, and everything will magically work!
Good luck!

Owin OpenIdConnect Active Directory HttpContext.GetOwinContext doesn't open microsoftonlin login page

I'm trying to use Owin and OpenIdConnect to authenticate users via active directory (office 365 online). I've followed this example and I managed to create a new MVC test project and get it all working. (Settings for AD app id, tenant, Web config etc all fine).
I'm now trying to add that functionality into my existing ASP.net mvc application and I can't get the dang thing to work.
This is what I have: An Account Controller with a "void" action like this (from the example that works in my PoC but not in my actual application):
public void SignIn()
{
// Send an OpenID Connect sign-in request.
if (!Request.IsAuthenticated)
{
HttpContext.GetOwinContext().Authentication.Challenge(new AuthenticationProperties { RedirectUri = "/" }, OpenIdConnectAuthenticationDefaults.AuthenticationType);
}
}
When this action is invoked, I expect the browser to be directed to: login.microsoftonline.com..., but instead it opens this page: https://localhost:44301/Account/Login?ReturnUrl=%2fAccount%2fSignIn
It's like it's calling some sort of redirect somewhere and I can't see where.
Help!
I found the answer. I had to do 2 things:
Remove the WebMatrix dll's from the references (apparently nuget package for mvc put it there, so it might come back)
Remove authentication mode="Forms" from web.config
Thanks.

Angular Adal how to retrieve the username or email

I have written an angular js app that I am using angular-adal.js to authenticate against Azure AD. I have configured all routes to requireADLogin and also added
extraQueryParameter: 'nux=1,scope=openid'
in the init method.
My question is where can I pull the logged in username or email etc from to store against the records they are creating after they've logged in. Because I am not manually authenticating in code I don't have a token object or anything to play with. Any pointers would be appreciated as although I've searched all the exmaples seem to be when you are making the calls yourself rather than letting UI Router do the authentication.
I'm sure this must be a common thing to do though!!
Thanks in advance!
After we sign-in the Angular application using ADAl library, it provides userInfo object which we can get the information about the user. And we can get the userName from this object directly.
Here is the code and figure for your reference:
$scope.printUserName = function () {
console.log(adalAuthenticationService.userInfo.userName);
};
The Microsoft also provide a code sample for the Angular application, you can refer it from here.

Resources