I'm trying to get Facebook login working with Cognito User Pools in a React project using aws-amplify.
I think I've set up the Facebook App and Cognito User Pool correctly by following various docs. Note that I'm using User Pools rather than Federated Identities.
I'm a bit stuck and confused on the React side of things. I've tried a few different guides, but all have the same outcome...
The Login button triggers this code:
Auth.configure({
oauth: {
domain: 'xxxxxxxxx.auth.eu-west-2.amazoncognito.com',
redirectSignIn: process.env.REACT_APP_FACEBOOK_REDIRECT_SIGN_IN,
redirectSignOut: process.env.REACT_APP_FACEBOOK_REDIRECT_SIGN_OUT,
responseType: 'token'
},
region: process.env.REACT_APP_AWS_REGION,
userPoolId: process.env.REACT_APP_USER_POOL_ID,
userPoolWebClientId: process.env.REACT_APP_USER_POOL_WEB_CLIENT_ID
})
Auth.federatedSignIn({provider: 'Facebook'})
After clicking the Login button, the page is redirected and ends up with this hash in the url:
https://localhost:3000/sign-in#access_token=xxx&state=xxx&token_type=Bearer&expires_in=3600
If I then call Auth.currentAuthenticatedUser(), I get no user ("The user is not authenticated"), and if I try Hub.listen("auth"), the only events that get fired are parsingCallbackUrl and configured - the page is then redirected and the signIn event is never fired.
If I then click on the Login button again (when the url has the hash with access_token etc), I will be successfully signed in. If I remove the hash, and try to sign in, it will fail as above.
Any ideas what's going on? Do I need to handle the access token from the hash myself? Why does Auth.federatedSignIn only seem to work if the access token is already in the hash?
I've just worked it out... the Auth.configure call needed to be moved out of the component and into App.js. Everything now seems to be working properly.
Related
I have a React site trying to get access token from my Laravel oAuth portal (using Passport). As I understand from the documentation, I create the state,code challenge and code verifier on my react app. I create a url with the required parameters and make a redirection to /oauth/authorize. The complete code for the redirection is window.location.replace('http://portal.test/oauth/authorize?' + paramsStr). http://portal.test is my oAuth portal (using Valet) and paramsStr contains all my parameters: client_id, redirect_uri, response_type, scope, state, code_verifier, code_challenge, code_challenge_method.
I am redirected to the portal as I should which redirects me to the login form. Once logged in, I have to approve the authorization request. After that step, I am supposed to be redirected to my React app to verify the state parameter and then make a POST request to my oAuth portal to request an access token. (again, from the documentation)
The url in my browser is still http://portal.test/login (the oAuth portal url) where it should be http://auth.localhost:3006 (the React app). I do have kind of a popup that opens, showing the content of the React app but I have a problem with my cookies. In the first step, after creating the state,code challenge and code verifier, I store those (using react-cookie). If I check the cookies right after, I can see them. If I go to another page of my React app, I can see them. If I manually go to another url (like google for example) and then go back to my React app, I can see them. So I know that setting the cookies does work. But in that weird popup I can't access the cookies.
I guess that a redirection issue and I can't access them because the url in the browser in not the url of my React app. How can I fix that ?
Relevant code for the login
const [cookies,setCookie,removeCookie] = useCookies([]);
setCookie('code_challenge',code_challenge);
setCookie('code_verifier',code_verifier);
setCookie('state',state);
console.log(cookies); // this shows the 3 values
window.location.replace('http://portal.test/oauth/authorize?' + paramsStr;
Page I am redirected to within React app
const [cookies,setCookie,removeCookie] = useCookies(["foo"]);
console.log(cookies); // empty
In the url to /oauth/authorize the parameter redirect_uri is http://auth.localhost:3006. In the DB in the oauth_clients table, the redirect value is the same.
is there a way to user your custom React GUI with oidc-client-js? I know that if you trigger authentication endpoint using:
// PopUps might be blocked by the user, fallback to redirect
try {
await this.userManager.signinRedirect(this.createArguments(state)); //Shows midleware login form
return this.redirect();
} catch (redirectError) {
console.log("Redirect authentication error: ", redirectError);
return this.error(redirectError);
}
Middleware will try to render its predefined login form:
However I have my own React form and I only need to pass to OICDClient params (email,password) and get back User instance to display UserName etc. Something like:
var loggedUser = await this.userManager.signinCustom(state.loginEmail, state.LoginPassword); //Login using credentials
I don't want to write all the logic by myself I really want to use all functionality from OIDCClient - only with my GUI (loginForm, registerForm, updateUserForm etc).
I'm using scaffolded library from MSDN using command:
dotnet new react -o <output_directory_name> -au Individual
Is there any method/implementation to initialise oidc-client-js from React components and not user default GUI forms?
Thanks a lot!
I might be missing some thing but the whole idea of using a 3rd partly federated auth provider be it your own/your company's SSO (say developed using Identity Server 4) or say Google sign in(say using their Firebase JS kit) or Microsoft sign in, Facebook sign in etc. is that you will be redirected to their authentication endpoint where you then use say your google credentials (if you are using google sign in for example) to sign on to google auth servers. Once you do that then a payload (consisting of an identity token and access token) is returned back to your redirect URL which you must configure for your specific app.
By saying you'd like to provide your own sign-in form you are missing the entire point of using a 3rd party authentication provider. Besides, you/your app shouldn't know about user names and passwords and you don't want to have access to all that information. All that you should be interested in knowing whether the user, who are using one of the federated authentication providers, that you would have configured for your app, are who they claim to be and you then delegate all that heavy lifting to your 3rd party authentication provider.
Besides, say your company has a SSO system of their own then all your company's app will use that SSO system and from a UI perspective you want to show the same login screen so as to give a consistent user experience.
In addition, if you show me a google authentication button and then on clicking that button you show me some weird form that doesn't look like the typical google picklist sign-in form then I'll shut down your app before you can say hello, and, I suspect most user would (and should) do the same. The reason being that when you show me a google sign-in page then I know that you/your app will only get back what you need and I wouldn't ever entrust my google user name and password to any other application.
If you really want to have your own authentication form then you'll have to manage user names and passwords yourself, the way we used to do things probably over 10+ years back.
If you decide to go the route of setting up your own authentication system and then say use identity server 4 then yes you can certainly change the UI and customize it to your heart's content, but that will happen at the server level, not at the level of your react app. Point being that in any SSO system the user will be redirected to the that auth provider's endpoint where they then authenticate (and, optionally, provider permission for your app to use certain claims) and once they do that they they are redirected back to your redirect endpoint with a payload (JWT token).
Lastly, even if you could some how wire up a client side sign in form, I'm not sure you would want to use it. Passing passwords & user names over the wire isn't a good idea. You'll always want to use a server rendered sign in form.
OKTA-Shibboleth(Apache)-Nakisa(Tomcat)
SSO is working for logging-in.
Now, I need to configure Logout. So, user logs out from the app, user needs to be redirected to OKTA page with tiles.
But, currently,user is redirected to the app again.
It's sending user to /logout?redirect=default.html but that default.html is captured by Apache rule and logging user back in.
It looks like it needs to hit
https://xxxx/Shibboleth.sso/Logout. When I access this url, it says logout is successfully done although it's not going back to OKTA. Does that mean that in the App's logout setting, they need to redirect to this?
But, how do I make user to go back to IdP(i.e OKTA) again?
This is what I assume that will happen.
Logout button click > logout from Shibboleth > return to OKTA so user can click other tiles.
Something to configure Shibboleth2.xml?
Document says i just need to configure the following which is there by default.
<!-- SAML and local-only logout. -->
<Logout>SAML2 Local</Logout>
But, how does it redirect user to OKTA(IdP) once user log out completes.
Is it configured in IdP's metadata ?
You can redirect the user after a local logout event anywhere you'd like, via passing the ?return= parameter a URL-encoded destination, i.e. you should update your logout link to:
https://xxxx/Shibboleth.sso/Logout?return=https%3A%2F%2Fgoogle.com
in order to redirect folks to Google once logout has taken place.
Now, you only need an Okta URL to return folks to... so I think if your client's Okta tenant is "foobar.okta.com", redirecting them after local logout to the Okta login page shouldn't prompt them to login, since they will already have the Okta Session... so maybe try:
https://xxxx/Shibboleth.sso/Logout?return=https%3A%2F%2Ffoobar.okta.com%2Flogin
Of course, you'll need to test that... but it should work, and on the off chance that the user's Shibboleth SP session was active, and their Okta session invalidated through some other mechanism, that'll just return them to their regular Okta login page.
You can obviously redirect them to any endpoint with the return parameter, for example, whatever Okta's logout URL (if you wanted to kill their Okta session too).
The only logout that's configurable by Metadata is SLO (single logout), i.e. if you wanted it to, Shibboleth can redirect the user to Okta after they complete the logout of the SP session, along with a specially-craft <LogoutRequest> assertion payload, which Okta would parse and act on in any number of ways, i.e. killing the user's Okta session, propagating Okta-initiated subsequent <LogoutRequest> assertions to other Service Providers, etc. In practice, this never really works, because such configurations are very difficult to get working between all of the relevant parties.
I've been learning Auth0 for a React / React Native project. With two different apps now, including one from their site, I see the following behavior:
clear browser cache
login
enter password, now logged in
select logout
--> now logged out
select login
am NOT prompted for password again, just logged in without interaction.
It seems the session has been kept alive even though I logged out. I would expect that if I manually log out of an application, I must re-authorize with my password on the next login attempt.
As I said I've seen this twice now, once with my own project and once with the tutorial they provide at https://auth0.com/blog/react-tutorial-building-and-securing-your-first-app/ . Doesn't make any sense to me. Am I missing something?
Thanks ~~
This is the Seamless SSO behaviour explained here. This is now enabled by default on all tenants and it "seamlessly" logs the user in without showing any prompts if a session exists for the user in the Authorization server (Auth0 in this case). Previously you would get a prompt that said "Last time you logged in with ..." Clicking it would login you in without requiring a password.
If you are "Logging out" and yet you can log back in again without needing to enter credentials, the most likely explanation is that you are actually not calling the https://YOUR_AUTH0_DOMAIN/v2/logout endpoint which logs out the user by clearing their SSO cookie in Auth0. You can confirm this endpoint is called from Network tab in your browser when you click to logout.
The Auth0 React quickstart by default does not call the logout endpoint, it only removes the tokens from browser storage. To clear the SSO cookie and logout from IdP using Auth0.js you need to call the logout function as well. Refer to the Auth0.js logout function here.
Hope that helps.
We have a B2C custom policy for authentication but I am having trouble getting a consistent complete logout. The only way I have been able to get a complete logout of single sign on is to use the common endpoint:
https://login.microsoftonline.com/common/oauth2/logout?post_logout_redirect_uri={our homepage}
Then when I login I see this
Then I click sign in and see this
but even this does not always work. Sometimes it does not redirect but just sits on the "you have been logged out" screen.
Using the logout endpoint given in our metadata endpoint does not work as expected. I see the sign in screen (first image) but I cannot choose which account to login with I just click the button to sign in. I assume this means single sign on logout has not worked.
https://login.microsoftonline.com/te/{tennant}/{b2c-policy}/oauth2/v2.0/logout?post_logout_redirect_uri={our homepage}
How can I either get the first one to work every time or the second one to logout completely?
EDIT: Sorry I should have mentioned I am using node.js/javascript but any url type solution will work also. Also we are using B2C so the application is registered on that tenant. There is no option for a lotout url on this page.
In order to logout the user from B2C, you need to redirect your user to the B2C logout endpoint, not to the common endpoint. This should look like:
https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/oauth2/v2.0/logout?p=b2c_1_sign_in&post_logout_redirect_uri={your homepage}
Be sure you redirect the browser to that endpoint and don't try to do a GET through a back-channel, otherwise it will not do anything as the Single Sign-in mechanism is based on browser cookies.
Reference: https://learn.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-reference-oidc#send-a-sign-out-request
If I understand you correctly, you are trying to configure single sign out? This can be done but requires configuration separate from the sign-on configuration.
In the Accounts Controller you need to add a SingleSignOut action.
public ActionResult SingleSignOut(string redirectUri)
{
if (redirectUri == null)
ViewBag.RedirectUri = "https://localhost:44308/";
else
ViewBag.RedirectUri = redirectUri;
HttpContext.GetOwinContext().Authentication.SignOut(CookieAuthenticationDefaults.AuthenticationType);
return View();
}
See this tutorial and the accompanying repository.
This reference is also helpful.