I asked same question in Japanese forum and no answer was returned so that I am asiking in this site.
This question is about AWS Amplify.
I am trying to implement login form with React and withAuthenticator() of Amplify in reference to a document of AWS(https://aws-amplify.github.io/docs/js/authentication) ,
but my login form is not like sample's UI of the document and css is not applied like this below image.
I can login and signup.
Is there anything to resolve this problem?
my login form made by withAuthenticator()
import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
import { withAuthenticator } from 'aws-amplify-react';
Amplify.configure(awsconfig);
function App() {
return (
);
}
export default withAuthenticator(App);
I cleared cache but not working.
Also there are no errors in the development tool of Chrome.
Sorry for my poor english.
Try using #aws-amplify/ui-react instead of aws-amplify-react.
import { withAuthenticator } from '#aws-amplify/ui-react';
In your app.js add the following inport
import '#aws-amplify/ui/dist/style.css';
I was missing this import
import '#aws-amplify/ui-react/styles.css';
Only this one worked for me:
import '#aws-amplify/ui-react/styles.css';
Related
I noticed some weird behaviour in my react app, which I do not understand:
I created a firebase app object which I export:
// Initialize Firebase
const app = initializeApp(firebaseConfig);
export default app;
When I dont import it in my other component, where I use getAuth etc., I still get the same error. When I import it in the "correct" component, everything works.
import app from "../firebase";
I don´t understand why, since the app object is not used in the component. Why do I need to import the object when I don´t even use it? I guess it is used... but I don´t understand how.
I am quite new to Stripe and fairly new to React, so I need help troubleshooting - hopefully I am just forgetting something simple. I am building an app on create-react-app with modular Firebase, cloud functions, react-router-dom v6 and hopefully Stripe Elements. The error gives 3 reasons I could be getting it (React's page on that: https://reactjs.org/warnings/invalid-hook-call-warning.html) - I don't think I'm breaking the rules of hooks, since everything works fine as long as I don't try to add Elements to any component, and I only see one version of React and react-dom in my app when I run npm ls react and npm ls react-dom. Maybe I have more than one copy of React - can Stripe Elements be adding another copy? I've tried adding react and react-dom as peer dependencies, but I can't complete the final step of editing webpack because I don't have access to it with create-react-app. On the Stripe discord page, they told me they didn't know enough about React to troubleshoot, so I'm hoping that someone here will recognize what I'm doing wrong. Here is an example of my PaymentForm component:
import { getApp } from 'firebase/app'
import { Link, useNavigate } from "react-router-dom";
import { getFirestore, doc, setDoc } from 'firebase/firestore'
import { getAuth, EmailAuthProvider, linkWithCredential} from 'firebase/auth'
import {loadStripe} from '#stripe/stripe-js';
import { Elements } from '#stripe/react-stripe-js';
import CardPaymentForm from "../CardPaymentForm"
const stripePromise = loadStripe(my public key here);
export const PaymentFormPage = () => {
return (
<div className="paymentFormPage flex-col">
<Elements stripe={stripePromise}>
{/* CardPaymentForm would go here */}
</Elements>
</div>
)
}
Has anyone had any experience with troubleshooting this? Any obvious things I might have done wrong, or places to start first?
I have set up deep linking in my project with react-navigation. It is successfully working in android. But in ios, it is opening the app successfully but does not route to the correct location.
this is how I code it with react-navigation.
import 'react-native-gesture-handler';
import * as React from 'react';
import {NavigationContainer} from '#react-navigation/native';
import {Linking} from 'react-native';
import AppStackNavigator from '_navigations/AppStackNavigator';
import I18n from 'i18n-js';
export default function App() {
const linking = {
prefixes: ['https://mydomain/meeting','myapp://meeting'],
config: {
screens: {
login: 'login/:data',
},
},
};
return (
<NavigationContainer linking={linking} >
<AppStackNavigator />
</NavigationContainer>
);
}
As this one is not working then I tried it with getInitialState using use linking hook. Then the initial state was always undefined. I do not have any idea to fix this. I tried almost all the examples I was able to find to fix this issue. But I was unable to do so. If someone can help me to fix this it is really really grateful. Thank you.
react-navigation:"^5.2.16",
react:"16.11.0"
react-native:"0.62.2"
ios:14.2
xcode: 12
I have a logout function in app (same level as router) that's passed down to various pages so the user can logout from anywhere. How can I add a redirect when the function is called?
I tried using this.props.history.push("/"); but get error Cannot read property 'push' of undefined
To answer to your question we need to know which router you are using and which version.
If you are using react-router you can have a look at https://tylermcginnis.com/react-router-programmatically-navigate/
Use the (withRouter) high-order component
Sample
import React from "react";
import { withRouter } from "react-router-dom";
class App extends React.Component {
...
handleSubmit=()=>{
this.props.history.push("/path");
}
...
}
export default withRouter(App);
Live demo with sample code
I used amplify add auth that works fine and then amplify push.
The React website is running without a problem. But when I try to register or login, I get the error [ERROR] AuthClass - Cannot get the current user because the user pool is missing. Please make sure the Auth module is configured with a valid Cognito User Pool ID.
But the aws_user_pools_id is the same like in the id in the aws console.
Have someone an idea what the problem could be?
thanks ;)
Thats my App.js with no magic...
import React, { Component } from 'react';
import './App.css';
import HomeScreen from './screens/HomeScreen';
import { withAuthenticator } from 'aws-amplify-react';
class App extends Component {
render() {
return (
<div className="App">
<HomeScreen />
</div>
);
}
}
export default withAuthenticator(App);
The Problem was, that you have to add the configure method as well:
import Amplify from 'aws-amplify';
import aws_exports from './aws-exports';
import { withAuthenticator } from 'aws-amplify-react';
Amplify.configure(aws_exports);
I had faced a similar issue with aws and to overcome I simply created a new user pool after which I was able to log in and register.
I had to do the following and it worked.
amplify push
amplify publish
After that, the No userPool error went away and I was sent a confirmation code, received it in email, and then used that to confirm my account. Then I was able to login.
adding value for the region solved the error for me.
default : region: ''
new : region: 'us-east-1'