I've integrated my Blazor wasm system with Azure AD to authenticate user identity. I've followed the Microsoft example to set it up. But most of the examples are authenticate in main layout (which have the menu layout), then only redirect to Microsoft login form.
How to authenticate in login layout (manual customize) before land to main layout?
Below is my code.
<CascadingAuthenticationState>
<Router AppAssembly="#typeof(Program).Assembly">
<Found Context="routeData">
<AuthorizeRouteView RouteData="#routeData" DefaultLayout="#typeof(MainLayout)">
<NotAuthorized>
#if (!context.User.Identity.IsAuthenticated)
{
<RedirectToLogin />
}
else
{
<p>You are not authorized to access this resource.</p>
}
</NotAuthorized>
</AuthorizeRouteView>
</Found>
<NotFound>
<LayoutView Layout="#typeof(MainLayout)">
<p>Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
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).
in this article its mentioned how it can add optional claims to an azure application
so I enabled the family_name, given_name in following way
then how It can retrieve this in the application side?
in auth0 sample application it's sharing the following details only
import React from "react";
import { Container, Row, Col } from "reactstrap";
import Highlight from "../components/Highlight";
import Loading from "../components/Loading";
import { useAuth0, withAuthenticationRequired } from "#auth0/auth0-react";
export const ProfileComponent = () => {
const { user } = useAuth0();
return (
<Container className="mb-5">
<Row className="align-items-center profile-header mb-5 text-center text-md-left">
<Col md={2}>
<img
src={user.picture}
alt="Profile"
className="rounded-circle img-fluid profile-picture mb-3 mb-md-0"
/>
</Col>
<Col md>
<h2>{user.name}</h2>
<p className="lead text-muted">{user.email}</p>
</Col>
</Row>
<Row>
<Highlight>{JSON.stringify(user, null, 2)}</Highlight>
</Row>
</Container>
);
};
export default withAuthenticationRequired(ProfileComponent, {
onRedirecting: () => <Loading />,
});
I tried to reproduce the same in my environment via Postman and got below results:
I created one Azure AD application and assigned API permissions like below:
In Token configuration, I added both family_name and given_name like below:
Before generating the access token, please check whether the user has both attributes updated or not like below:
To get code for access token, I used below authorization request:
https://login.microsoftonline.com/<tenantID>/oauth2/v2.0/authorize?
client_id=<application_id>
&response_type=code
&redirect_uri=https://jwt.ms
&response_mode=query
&scope=openid profile user.read
&state=12345
When I ran the above request in browser, I got code in address bar after authenticating successfully like below:
I generated the access token via Postman using below parameters:
POST https://login.microsoftonline.com/<tenantID>/oauth2/v2.0/token
client_id:<application_id>
grant_type:authorization_code
scope:openid profile user.read
client_secret:secret
redirect_uri:https://jwt.ms
code: code from above request
Response:
I decoded the above access token in jwt.ms and got below claims:
When I used the above token to get user's profile with this query, I got both family_name and given_name like below:
GET https://graph.microsoft.com/oidc/userinfo
Response:
In your case, make sure whether the signed in user has both family_name and given_name properties updated in their profiles or not.
Please check whether the access token includes family_name and given_name claims or not by decoding it.
I am trying to implement login through google and Facebook in chrome extension made in React JS which is wrapped with iframe.
The package that i am using for google login is "react-google-login" and for facebook login i am using "react-facebook-login".
In both cases google login and facebook login button are visible, but in case of google login the button is disable(not clickable) and in case of facebook login the button is clickable but the facebook user selector pop up don't load.
<GoogleLogin
disabled={false}
clientId="**********-akj6ujapgd722u0kqaib2lmca3mu71vt.apps.googleusercontent.com"
buttonText="Login"
onSuccess={this.responseGoogle}
onFailure={this.responseGoogle}
cookiePolicy={'single_host_origin'}
/>
For google login i am seeing this warning message "Uncaught Type Error: Cannot read properties of undefined (reading 'load')
at HTMLScriptElement."
I test on my local environment the plugins react-messenger-customer-chat.
I just installed the plugin and insert this folowing code in my render view
render() {
const { src, title, tracks, scrollTop } = this.state;
return (
<div id="lz-app">
<Header scrollTop={scrollTop}/>
<main className="main">
<MessengerCustomerChat
pageId="xxxxxx"
appId="xxxxxx"
/>
</main>
<Footer/>
</div>
</div>
);
}
When run my react app , i have the error :
Refused to frame 'https://web.facebook.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://web.facebook.com".
How I resolve this issue please?
Thanks
I found the solution here
Solution here
https://www.youtube.com/watch?v=8e_4KIj4jBs
You need to whitelist your domain in the Facebook page settings. To do this, navigate to: Your FB Page > Settings > Advanced Messaging > White-listed domains and enter your domain here.
i want to restrict page with url say "myurl/view". Only admin users can view this page and other users cannot access this page.
Currently when view button is clicked it redirects to url "/view". and this view button is visible only to admin users.
below is my code,
render = () => {
const admin = //some logic here and this admin value is boolean;
return (
<>
{admin && <a href="/view">
<button>View</button>
}
</>
);
}
As seen from above code this button is visible only to admins and clicking it will redirect to "/view".
now when user who is not admin types "/view" it gets him to the same page which he is not supposed to view.
how can i restrict this access using react router. i am doing this for the first time and not sure how to do this. could someone help me with this. thanks.
You can use redirect component from react-router-dom. Here is the documentation page. This is the example usage based upon your situation.
<Route exact path="/view">
{isAdmin ? <AdminPage /> :<Redirect to="/" />}
</Route>
FYI, this is how you import it
import { Redirect } from "react-router-dom";
store a jwt token and verify the token on backend and see if the token corrsponds to the connected account trying to access url. If token is owned by an admin, return admin page otherwise an error page appear.