I am facing the issue on auth0 login & register - reactjs

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"
}

Related

React MSAL multi instance with Azure AD and Azure ADB2C

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.

Amplify React - Cognito-remove signup in login page

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

Routing to static HTML using React and AWS-Amplify

I have built a website using React and am now using AWS-Amplify to host it. I am trying to setup Routes that redirect to static HTML files which are located in the /public directory. Everything works just fine when I test locally, but the Routes don't work after the site has been deployed.
This is what I have for my Routes.
<BrowserRouter>
<Routes>
.
. // Other unrelated Routes here..
.
<Route path="/page1" render={() => {window.location.href="page1/index.html"}} />
<Route path="/page2" render={() => {window.location.href="page2/index.html"}} />
<Route path="/page3" render={() => {window.location.href="page3/index.html"}} />
</Routes>
</BrowserRouter>
My rewrites and redirects setting for 200 (Rewrites) is currently:
</^[^.]+$|\.(?!(html|css|gif|ico|jpg|jpeg|js|png|PNG|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
The console doesn't give any warnings or errors whenever I try to access these static HTML files from the deployed site, but a null page is loaded. Is there some settings I need to modify on my Amplify application? Thanks!
Try removing your react-router entries and adding some rewrites/redirects in amplify console for something like:
/page1 /public/page1/index.html 200
/page2 /public/page2/index.html 200
This may give you some ideas for a solution using rewrites/redirects. I've used it myself but not sure on how maintainable it is going forward.
From the AWS Amplify console left sidebar under App Settings, click Rewrites and redirects.
click "Edit" on the right-hand side and in the same place click "Open text editor"
your configurations should be something like the below.
[
{
"source": "/static-folder-in-public/<*>",
"target": "/static-folder-in-public/<*>",
"status": "200",
"condition": null
},
{
"source": "/static/<*>",
"target": "/static/<*>",
"status": "200",
"condition": null
},
{
"source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|json|xml)$)([^.]+$)/>",
"target": "/",
"status": "200",
"condition": null
}
]

Sequence contains no elements error once I go from Service provider Project to Identity Project

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.

Auth0 returns a 401 on token request. Auth0 logs show login is successful

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.

Resources