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"]}
/>
Related
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.
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 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
I am trying to implement a login page in admin on rest with a link to a registration form. I am quite a newbie in react and frontend development in general.
I duplicated the login page from the admin on rest demo, but I can't figure out how to add the link in the bottom. I tried adding a component from react-router but I keep getting all sorts of errors. Is there any example I can follow?
EDIT: I am trying to add a registration page with a custom route but the page is displayed inside the admin UI. This is what it looks like:
admin-on-rest is a frontend framework but it's also a bunch of components you can use/integrate in your own app.
It's important to understand how react is working to work with admin-on-rest.
Afaik you have to know about redux, redux-form, react-router and redux-saga.
There is a short description how to add a login page and
how to customize the login page.
But this is not an example.
Here is the source code of the login page. If you really want to duplicate the page you can add a link to the registration page in the render method.
First create a file called
login.js
and duplicate the original login page. Import the Link-Component:
import { Link } from 'react-router-dom';
Afterwards use the Link somewhere, for example between </form> and </Card> (between line 106 and 107).
<Link to={{pathname: "/register"}} >Registration</Link>
In your
app.js
import your created login page:
import Login from './login';
and use it:
<Admin loginPage={Login} authClient={authClient} restClient={jsonServerRestClient('http://jsonplaceholder.typicode.com')}>
EDIT:
Now you have a "Registration"-Link in your Login page.
Now, it's time to create the registration page. I am not a admin-on-rest expert, but I think the idea of admin-on-rest is to show always the menu and check the authorization. I think the most of the admin app's will not have a registration page, which must be visible for users which have not logged in and they should not see the menu on the left side. It's similar to a login page. So you have to create custom route to a custom page (without a authorization check) with a custom layout.
Create a new file called
MyLayout.js
with the content of
Layout.js
and remove the lines
injectTapEventPlugin()
and
<Sidebar>
{menu}
</Sidebar>
to hide the menu on the left side.
Then create a file called
customRoutes.js
with the following content:
import React from 'react';
import { Route } from 'react-router-dom';
import Register from './Register';
export default [
<Route exact path="/register" component={Register} />
];
and a file called
Register.js
with
import React from 'react';
import { Card, CardText } from 'material-ui/Card';
import { ViewTitle } from 'admin-on-rest';
const Register = () => (
<Card>
<ViewTitle title="Register" />
<CardText>
<div>This is the register page.</div>
</CardText>
</Card>
);
export default Register;
In your
app.js:
import MyLayout from './MyLayout';
import customRoutes from './customRoutes';
import MyLayout from './MyLayout';
import authClient from './authClient';
<Admin appLayout={MyLayout} loginPage={Login} authClient={authClient} customRoutes={customRoutes} restClient={myApiRestClient}>
This is just an (ugly) example.
Hope this helps. :)