I am using react-google-login for my react app. Here is my code
<GoogleLogin
clientId="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com"
buttonText="Google"
render={renderProps => (
<button onClick={renderProps.onClick} className='google-login-button'>
<img src={GoogleButton}/>
</button>
)}
onSuccess={this.googleResponse}
onFailure={() => console.log('error')}
/>
What I want is, Only the Gsuit users will be able to signin/up.
Like someone with Gmail should not get the access.
You can try out with hostedDomain props of GoogleLogin if not tried yet. I found this relevant Restrict access to google login. Or you can follow this thread bhai.Gsuit Restriction
Related
I am using the Amplify/Authenticator component and setting up a Social sign-in (OAuth) with Google.
The scheme with email/password works fine, but the one with Google seems to fail - Cognito shows that after signup with Google, the Email field is empty and Email-verified is false (No).
What am I missing in the process? It looks that the sign-up with Google is not completed.
I do get some attributes captured from Google (e.g. pictures).
Cognito settings
Attributes captured from Google
export default function AuthPage() {
return (
<Authenticator
initialState="signIn"
components={components}
formFields={formFields}
socialProviders={["google"]}
>
{({ signOut, user }) => (
<main>
<h1>Hello {user.attributes.nickname}</h1>
<button onClick={signOut}>Sign out</button>
</main>
)}
</Authenticator>
);
}
Here is the outcome with an email/password signup.
I was expecting to get the same with Google.
Email sign up
Authenticator does not perfrom as expected as it does not block signing up with same emails (Sign UP w/ Google and Sign Up w/ Email).
I have a task in hand where I have a page A, where I can drag and drop to reorder certain components displayed as a list and another page B, which simply displays the list to the user without allowing any changes of order, and these two pages are supposed to stay updated with their current state. Any changes on page A should be reflected on page B without having to reload it. I do store my changes in a MongoDB database, and refreshing page B shows the updated order. And I know I can make the page update without refreshing it by simply making the page itself check after each x second the current condition of the database, but that feels resource heavy. Is there a better way to do this?
This is the fragment where I need the changes to happen. dragAndDrop is a prop item that is true on page A but false on page B.
<React.Fragment>
{
dragAndDrop ?
(
<Draggable draggableId={result.id} index={index}>
{(provided, snapshot) => (
<div
className={snapshot.isDragging ? "result-card dragging" : "result-card"}
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
>
<div className="d-flex align-items-center">
<span className="math-result">= { result.result }</span>
<span className="calculation-title">{ result.title }</span>
<button className="cstm-btn-red" onClick={() => this.openModal()}>See Input</button>
<Modal open={this.state.isOpen} onClose={() => this.closeModal()}>
{ result.inputContent }
</Modal>
</div>
</div>
)}
</Draggable>
) :
(
<div className="result-card">
<div className="d-flex align-items-center">
<span className="math-result">= { result.result }</span>
<span className="calculation-title">{ result.title }</span>
<button className="cstm-btn-red" onClick={() => this.openModal()}>See Input</button>
<Modal open={this.state.isOpen} onClose={() => this.closeModal()}>
{ result.inputContent }
</Modal>
</div>
</div>
)
}
</React.Fragment>
I'm still rather fresh to React JS and am learning more and more each day. I feel like there should be a discussion regarding my issue somewhere out there.
But I have been unable to find it. So, sorry for the post probably being a duplicate.
Simple way to store all the updates is to use Redux or Context API or the local storage of browser, you will have to go the links given to understand more. Basically, they store all the changes user is making without reloading any pages and it will persist till the user closes the tab.
If you want to store them permanently, I recommend calling the API ONCE he gets OUT of the page A ( you will have to track the page URLs or use useEffect return function to call this API - these seem difficult to understand first for a beginner but once you understand the useEffect hooks or react-router hooks, its very easy to do this)
and store his order in DB but also simultaneously update the redux state or context API state or local storage. Normally, we use redux for this which gives lot of advantages compared to Context or local storage.
I am making a webpage using react where I want to display every post in a facebook page. I am using this package to display each post and Facebook graph API to get each postID then I map it.
https://www.npmjs.com/package/reactjs-social-embed
My problem is that there is just too much blank space under each facebook post(See img). Id like each post to be positioned right on top of eachother.
If I try to change the height to auto or 100% the Like btn, comment, and share btn disappears.
return (
<>
{fbData.map((post) => (
<div style={{paddingTop: 40}}
className="col-lg-5 col-md-5 col-sm-5 container justify-content-center">
<Row>
<Facebook type="post"
width="800px"
height="680px"
url={`https://www.facebook.com/102417811874407/posts/${post.id.split("_")[1]}`} />
</Row>
</div>
)
)}
</>
);
};
export default Nyheter;
The facebook API does not return img size either :/
This is how it looks if I try to change each post to 200px
share` libraryto use Facebook share button with react and this is the code
render(){
var url = `http://localhost:3000/${this.props.match.params.id}/${this.props.match.params.name}`
return (
{/*some other codes*/}
<FacebookShareButton url={url} quote={"გააზიარე"} className="share">
<FacebookIcon size={32} round={true}/>
</FacebookShareButton>
)
}
but it does not work, I mean it opens facebook window but showing some error
about domain name, i think this problem is common, because i did everything according to documentation. what is problem?
You cannot share a localhost link, that link is only available on your own computer. Shared URLs need to be accessible by Facebook in public.
I'm using google oauth with React js and it is loading google account and
after i click on my profile popup get closed.
my code chunk
<GoogleLogin
clientId={GCLIENT_ID}
buttonText="Google Login"
onSuccess={() => this.googleResponse}
onFailure={() => this.googleResponse}
cookiePolicy={'single_host_origin'}
/>
Tried all suggestions given on the net. Still it seems not working. Appreciate your help.
onSucces={() => this.googleResponse} does not call your googleResponse method, it returns it to the caller of the function.
I recommend you change your code as follows:
<GoogleLogin
onSuccess={this.googleResponse}
onFailure={this.googleResponse}
/>