I have one web applicaiton in React, that uses Azure AD for login(Employee only). I want to provide access to External users as well(Clients) and for the same I want to use Azure ADB2C.
For testing purpose I provide B2C specific confiuration and that worked well(with some additional configuration).
Is there any way to provide mixed mode login support(AD and ADB2C) in same applicaiton with single MsalProvider?
"config": {
"auth": {
"authority": "########",
"clientId": "########",
"redirectUri": "http://localhost:9000",
"postLogoutRedirectUri": "http://localhost:9000",
"navigateToLoginRequestUrl": false
},
"cache": {
"cacheLocation": "localStorage",
"storeAuthStateInCookie": true
}
}
const pca = new PublicClientApplication(authConfig);
ReactDOM.render(
<MsalProvider instance={pca}>
<App />
</MsalProvider>,
document.getElementById("root")
);
Referene code https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial
Yes, add Azure AD federation to B2C.
Related
I have faced one issue in auth0 login when I checkmark the client_credentails in auth setting then I am not able to log in but I am able to register the user if it is unchecked that then I am able to log in but I am not able to register means visa versa code is working below I attached the code snip for react js & API call which I took from the network.
React Code
<Auth0Provider
domain={authConfig.domain}
clientId={authConfig.clientId}
client_secret={authConfig.client_secret}
code={"AUTHORIZATION_CODE"}
audience={authConfig.audience}
connection={authConfig.connection}
redirectUri={authConfig.redirectUri}
useRefreshTokens={true}
cacheLocation="localstorage"
>
<StrictMode>
<App />
</StrictMode>
</Auth0Provider>
Network-API call code :
Request URL: https://dev-sa5zq41o.us.auth0.com/oauth/token
{
"client_id": "xxxx",
"code_verifier": "xxx",
"grant_type": "authorization_code",
"code": "xxx",
"redirect_uri": "http://localhost:3000"
}
There is a SO question [How to remove signup in login page][1] and it addresses CF. In case of Amplify, CF template is generated by backend-config.json
"auth": {
"usermanager": {
"service": "Cognito",
"serviceType": "managed",
"providerPlugin": "awscloudformation",
}
}
How to configure Amplify template to generate CF template with property?
AdminCreateUserConfig:
AllowAdminCreateUserOnly: True
Link to Amplify templeate reference would be appreciated.
Edit:
Amplify supports overriding generated content. I run amplify override auth. It generated file amplify\backend\auth\myusermanager\override.ts. I did one override:
import { AmplifyAuthCognitoStackTemplate } from '#aws-amplify/cli-extensibility-helper';
export function override(resources: AmplifyAuthCognitoStackTemplate) {
resources.userPool.adminCreateUserConfig = {
allowAdminCreateUserOnly: true,
}
}
Generated CF template looks OK
"Resources": {
"UserPool": {
"Type": "AWS::Cognito::UserPool",
"Properties": {
"AdminCreateUserConfig": {
"AllowAdminCreateUserOnly": true
},
Regardless of it, Sign in link is present on login page.
When I check Cognito user pool policy, I find Only allow administrators to create users radio button selected.
EDIT
Suggested answer relates to VUE. I am using React.
"#aws-amplify/ui-react": "^2.1.0"
[1]: AWS Cognito-remove signup in login page
I'm using ITFoxtec SAML 2.0 where I have started multiple projects; TestIdpCore and TestWebAppCore. Once I click on the TestWebAppCore login link, I face the error Sequence contains no elements.
The error is because the identity provider TestIdpCore cannot find the relying party TestWebAppCore.
I think maybe the TestWebAppCore endpoint have changed or that the application is not answering.
The relying party TestWebAppCore is default exposed on https://localhost:44306/. And the relying party is configured in the identity provider TestIdpCore appsettings.json with the metadata endpoint "https://localhost:44306/metadata".
"Settings": {
"RelyingParties": [
{
"Metadata": "https://localhost:44327/metadata"
},
{
"Metadata": "https://localhost:44306/metadata"
},
{
"Metadata": "https://localhost:44307/metadata"
},
{
"Metadata": "https://localhost:44308/metadata"
},
{
"Metadata": "https://localhost:44309/metadata"
}
]
}
If the TestWebAppCore endpoint has changed you need to change the identity provider configuration.
I'm integrating auth0 from the tutorial into my own application and have encountered a couple of problems with authentication reflected in the auth0 logs.
This occurs on hitting my react login button:
Login.js
import React from "react";
import { useAuth0 } from "#auth0/auth0-react";
import '../components/App.css'
const LoginButton = () => {
const { loginWithRedirect } = useAuth0();
return <button class="btn btn-primary" onClick={() => loginWithRedirect()}>Log In</button>;
};
export default LoginButton;
However on the Auth0 Application logs I see that I am successfully authenticated and I also get a Failed Exchange, Successful Login and a Warning During Login.
Fixed Log: Warning During Login
Here's the text of the log for Warning During Login:
You are using Auth0 development keys which are only intended for use
in development and testing. This connection (google-oauth2) should be
configured with your own Development Keys to enable the consent page
to show your logo instead of Auth0's and to enable SSO for this
connection. AUTH0 DEVELOPMENT KEYS ARE NOT RECOMMENDED FOR PRODUCTION
ENVIRONMENTS. To learn more about Development Keys please refer to
https://auth0.com/docs/connections/social/devkeys.
This was fixed by following these instructions on the Auth0 website. Essentially:
Creating a google project and OAuth credentials
Adding the credentials inside my Auth0 connected apps
Broken: Login Successful
The log shows that it was a successful login. However on my application, I click the Login button and the expected auth0 modal does not appear.
{
"date": "2020-10-14T09:14:06.549Z",
"type": "s",
"connection_id": "",
"client_id": "<MyClientId>",
"client_name": "<MyClientName>",
"ip": "<MyIP>",
"user_agent": "Safari 13.1.2 / Mac OS X 10.15.6",
"details": {
"prompts": [],
"completedAt": 1602666846548,
"elapsedTime": null,
"session_id": "m0AeJer-FhZ0rb9UFPWgvDkvN7MW36h_"
},
"hostname": "<MyHost>",
"user_id": "<MyUserID>",
"user_name": "<MyUserName>",
"auth0_client": {
"name": "auth0-react",
"version": "1.1.0"
},
"log_id": "90020201014091409270008789595401783120816526823843168290",
"_id": "90020201014091409270008789595401783120816526823843168290",
"isMobile": false,
"description": "Successful login"
}
And looking at the response headers in safari, the token request has 401'd
URL: https://<testdomain>.auth0.com/oauth/token
Status: 401
Source: Network
Address: <testaddress>
Initiator:
auth0-spa-js.production.esm.js:15
Fixed Log: Failed Exchange
After ensuring that I was connecting to goole properly I saw that the issue persisted. Looking at the log I get the following under the heading of a Failed Exchange.
{
"date": "2020-10-14T09:14:07.304Z",
"type": "feacft",
"description": "Unauthorized",
"connection_id": "",
"client_id": "<MyClientId>",
"client_name": null,
"ip": "<TheIP>",
"user_agent": "Safari 13.1.2 / Mac OS X 10.15.6",
"details": {
"code": "*************Rw7"
},
"hostname": "<MyHostName>",
"user_id": "",
"user_name": "",
"log_id": "90020201014091410270002070951766882711015226887425228818",
"_id": "90020201014091410270002070951766882711015226887425228818",
"isMobile": false
}
This question fixed the Failed Exchange issue for me. Change your Auth0 Application properties settings to:
Application Type: Regular Web Application
Token Endpoint Authentication Method: None
This however, unearthed a new issue...
Broken Log: Failed Silent Auth
There's a number of fixes I did here so I'll document them in the answer.
Warning During Login
This was fixed by ensuring the my credentials provider had been properly set up. In this case google. For instructions on how to add google as a credentials provider see here.
Failed Exchange
This was fixed by going to the auth0 dashboard application settings and modifying the setting Application Type to Regular Web Application and the setting Token Endpoint Authentication Method to None.
Login Successful (but not really)
This disappeared once I fixed the Failed Exchange above.
Failed Silent Auth
This was never "fixed" and the error still appears on the log. However the comment on this question prompted me to revisit my Allowed Web Origins and Allowed Origins (CORS) on my auth0 to the below:
https://<mydomain>.eu.auth0.com, http://localhost:3000
This was the last issue in the chain and I could now use login and logout as expected.
I have two react web apps (both created using create-react-app) and I would like to deploy them to the same domain on different paths. For example:
myapp.firebaseapp.com/auth
myapp.firebaseapp.com/main
How do I accomplish this?
After searching around in the docs on Firebase under the hosting tab I was able to turn up some suggestions. I believe a Cloud Function might be the best solution for you to accomplish what you're saying (dynamic routing based on the URL).
https://firebase.google.com/docs/hosting/functions
From the link:
Create an HTTP function to your Hosting site Open /functions/index.js
in your favorite editor and replace its contents with the following
code. This will create a simple HTTPS function named bigben.
const functions = require('firebase-functions');
exports.bigben = functions.https.onRequest((req, res) => {
const hours = (new Date().getHours() % 12) + 1 // london is UTC + 1hr;
res.status(200).send(`<!doctype html>
<head>
<title>Time</title>
</head>
<body>
${'BONG '.repeat(hours)}
</body>
</html>`);
});
Direct Hosting requests to your function With rewrite rules you can direct requests that match specific patterns to a single
destination. For example, to direct all requests from the page /bigben
on your Hosting site to execute the bigben function, you would open
firebase.json and add the following rewrite configuration under the
hosting section.
{ "hosting": {
"public": "public",
// Add the following rewrites section *within* "hosting" "rewrites": [ {
"source": "/bigben", "function": "bigben"
} ]
} }
So in your case instead of executing this bigben function you can just use a function to render your app by calling your App() function.
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
I think zeit allows you to have up to 3 different deployments running simultaneously but what you're asking (I believe) is how to add different endpoints to your one firebase app.