I am using Amplify for a ReactJS app, and have configured a Cognito User Pool's Client to use Hosted UI. When previewed from within AWS Console ("View Hosted UI"), the UI customizations (banner logo and custom CSS) look exactly as configured. But when used within my React JS app, the UI does not show either logo or other customizations. I am following the steps outlined in using the hosted UI:
import {withAuthenticator} from '#aws-amplify/ui-react';
import '#aws-amplify/ui-react/styles.css';
Amplify.configure(awsconfig);
function App({signOut, user}) {
return (
<div className="App">
<Dashboard user={user} signOut={signOut}/>
</div>
);
}
export default withAuthenticator(App, {hideSignUp: true});
What could cause the Hosted UI in the app itself to look different from the "View Hosted UI" button from within AWS Console?
All other functionality is working as expected, only the UI customization is not showing up. No errors in console or anywhere, and amplify pull also did not change anything. The issue occurs on both localhost and remote deployments.
Related
I'm using the Amplify UI Authenticator component for the Authentication and added social Provider login also. Is there any way to customize the component. I Want the Social Provider buttons after the Sign in button.
<Authenticator
loginMechanisms={["email"]}
formFields={formFields}
components={components}
socialProviders={["google", "facebook", "amazon", "apple"]}
/>
I'm having an issue with my adsense ad inside my react component, it will almost always display the same ad on route change. I suspect this is because Google sees the route as an empty page and so would not serve personalized ads.
What I currently have is very simple. I have the google script on my index.html
and then my ad component which I'm calling under my App component.
import React from 'react';
export default class Ad extends React.Component {
componentDidMount () {
(window.adsbygoogle = window.adsbygoogle || []).push({});
}
render () {
return (
<div className='ad'>
<ins className='adsbygoogle'
style={{ display: 'block' }}
data-ad-client='ca-pub-4543556906953539'
data-ad-slot='3566322911'
data-ad-format='auto'
data-full-width-responsive="true"
/>
</div>
);
}
}
I was reading this thread and the answer was use googletags to manage served ads:
Using google adsense with React + React Router
However I found the answer vague maybe because I have never used google tag manager nor ads manager before. Does anyone have more information on this?
I have to redirect from my react native app to a third party website which is expecting some values from me
It is already implemented on my main website
Now I want to do it from my expo mobile app
I am doing like this in my website
const mainApp = ()=>{
const goToThird = ()=>{
$("#myform").submit();
}
return(
<button onPress={goToThird}>Verify</button>
)}
//form is hidden
<form id="myForm" action="https://thirdparty.com/verify">
<input type="hidden" name="email" value="myemail#gmail.com"/>
</form>
In the above way third party gets the values and everything is ok
In expo app i have tried doing the same thing with linking by making a query params url but it behaves as a get type url and third party is not able to get my things basically
How can I make a post request such that website is opened in browser when some one clicks on verify button in my expo app.
Tried:
import React from 'react'
import {Linking,View,Button} from 'react-native'
export const Test = ()=>{
const perform = ()=>{
Linking.openURL('https://thirdparty.com/verify?email=myemail#gmail.com');
}
return(
<View>
<Button title="Redirect" onPress={perform}></Button>
</View>
)
}
So by doing the above process it opens the browser but it is a get request and goal isn't achieved.
NOTE: My main website is in React.js
I am building a react app and I am using Material UI for the UI. I am also using a Login Component from #microsoft/mgt-react
On my Home page I am using the Login component from mgt-react to handle login functionalities. The components acccepts props such as loginInitiated, loginCompleted etc that i can pass my functions to. Take a look at the example below
import { Login, Providers } from '#microsoft/mgt-react';
<Login loginInitiated={handleLoginStarted} loginCompleted={handleLoginCompoleted} />
Below is how the ui Looks
The last button called singIn is the #microsoft/mgt-react Login that is imported above.
So my concern is that I do not like the ui of the #microsoft/mgt-react Login component and I want to use the Native Material UI Button components while still having access to the props in the #microsoft/mgt-react Login component such as loginInitiated and loginCompleted.
Is there a way i can forward these props to my own Material UI button Component?
I want to save a simple boolean + userID if a user is authenticated and have it accessible via React Context API.
Many guides wrapped their root compoennt with the context Provider. To me it seems wastefull to wrap the whole app. On the other hand I need this information to be available in all my main pages.
Does it have any negative consequenses to wrap your whole app with a React Context Provider?
Example:
class App extends Component {
render() {
return (
<MyProvider>
<div className="App">
<h1 className="App-title">Welcome to my web store</h1>
<ProductList />
</div>
</MyProvider>
);
}
}
I used this guide as a reference.
I do not have any experiences in React Redux so this might just natural to everyone who has used this framework before.
Researching Google brings up many guides on how to implement React Context or use HOC but the 15 I clicked did not answer my question.
#Fyodor pointed it out in his comment:
You can wrap whole app in provider. React-redux recommends the same
(react-redux.js.org/introduction/…), so you may consider it acceptable
practice