Amplify React - Cognito-remove signup in login page - reactjs

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

Related

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.

Why Google AdSense not showing with Reactjs?

I'm trying to implement a simple banner Ad with Google AdSense inside my React website. I used create-react-app.
I've created a component wrapping the banner:
import React, { Component } from 'react';
class AdBanner extends Component {
componentDidMount () {
(window.adsbygoogle = window.adsbygoogle || []).push({});
console.log('DID IT!!');
}
render () {
return (
<ins className="adsbygoogle"
style={{ display: "block"}}
data-ad-format="fluid"
data-ad-layout-key="-fb+5w+4e-db+86"
data-ad-client="ca-pub-xxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx">
</ins>
);
}
}
export default AdBanner;
And I've added the following script inside the <head> tag of my index.html file
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
## The problem ##
The Ad is not showing up in any way! The compiler is ok and browser does not give any message in the console (apart of 'DID IT!'. I've created the Ad in the console two days ago.
I've tried also deactivating React strict mode.
Thankssssss
When you say ad is not showing up - do you see empty white rectangle where ad should be? Also do you see googleads.g.doubleclick.net/pagead/ads? requests in network tab? If so - how many? If you see 2 then ad requests are made and what might be happening is that AdSense didn't find a good ad, which is normal. You can also try adding data-adtest="on" to the <ins> tag which might help to force an ad.

Cypress.io and Cucumber.io testing integration, Step implementation missing for:

Integration of Cypress and Cucumber seem to go well, however when tests are executed I get the following error:
Step implementation missing for: I open login page
cypress.json
{
"video": false,
"baseUrl": "http://localhost:8080",
"testFiles": "**/*.feature",
"cypress-cucumber-preprocessor": {
"nonGlobalStepDefinitions": true
}
}
./cypress/integration/login.feature
Feature: Login Feature
I want to login
#focus
Scenario: Navigate to Login
Given I open login page
Then I see Login
./cypress/integration/Login/login.js
import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
Given( 'I open login page', () => cy.visit( '/Login' ) );
Then( 'Login page should be shown', () => cy.url().should( 'include', '/Login' ) );
Your cypress-cucumber-preprocessor config should go in package.json, not in cypress.json.
Also, I believe the step implementation folder name must match the feature file name. So you should rename your step implementation folder to login instead of Login (./cypress/integration/login/login.js)
See doc here
Add step_defintions in your package.json with custom path
"cypress-cucumber-preprocessor": {
"step_definitions": "cypress/integration/features/step_definitions/**/"
}
While I do not think this answer is ideal, I managed to get things working by removing "cypress-cucumber-preprocessor" from cypress.json and moving sub directories from the "cypress/integration" directory to "cypress/support/step_definitions"

OneDrive file browser authentication issues "GraphError: Unable to retrieve user's mysite URL."

We are working on a request for embedding OneDrive file browser within a web application.
The code we are using comes directly from the examples provided on github.
Here is our client side code:
import React from "react"
import logo from "./logo.svg"
import "./App.css"
import { GraphFileBrowser } from "#microsoft/file-browser"
class App extends React.Component {
render() {
return (
<GraphFileBrowser getAuthenticationToken={this.getAuthenticationToken} />
)
}
getAuthenticationToken() {
return new Promise(resolve =>
resolve(
"eyJ0eXAiOiJKV1QiLCJub25jZSI6ImtkT..."
)
)
}
}
export default App
This is 100% based on examples provided by MS.
As we don't want the users to have to login using oAuth, we are getting a token server side using MicrosoftGraph following this official guide: https://learn.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-client-creds-grant-flow.
We have of course also setup the app in Azure, based on all the requirements defined above.
So once we insert the token in our react component, we just get an error: GraphError: Unable to retrieve user's mysite URL.
When we test the same client side app however with a token generated via the OAUTH user token, the file browser will

Resources