I was hoping to direct a user to the Password Reset Page of the Auth0 Universal Login Page, I assumed Auth0 would handle the required functionality, in a similar way we use
const { loginWithRedirect } = useAuth0()
I know I can call loginWithRedirect() and then click on forgot password, however that takes 2 clicks and I want my Change Password button to immediately redirect me. Is there no trick like loginWithRedirect({ action: 'signup' })} which redirects me instantly to the signup form?
I know about sending a POST call to the Authentication API, I want to do this via the Universal Login Page.
I have come to the conclusion that this still wasn't possible.
There's a property screen_hint that we can pass to
auth0.loginWithRedirect({ screen_hint: "signup" })
So it would have been great to be able to do this:
auth0.loginWithRedirect({ screen_hint: "password-reset" })
This question has already been asked here
And the answer was
Unfortunately this is not currently possible. The only options are to open with the login page or the sign-up page. This is a limitation with the Universal Login Page rather than this SDK, it simply doesn't allow for opening other screens as the default for the moment.
In the end, what we did was to provide a link, which when clicked on, would make a call to the API.
Not sure if it's useful, but I'll explain how we deal with password reset (using Auth0) at the company I work for, which might push you in a slightly different direction.
First thing to understand is; there's 2 places where a user might need/want to reset their password.
When they're signing in with their email/username and password, but have forgotten their password.
They want to proactively change their password after they've already signed in.
In both scenarios we simply call an Auth0 authentication API to Change Password, which sends a change password email to the user. Note: for the #1 we might need to capture the email/username (that is, if we don't yet have this information), as this is required for the Change Password request. For #2 we should already have this information either in ID token or via the /userinfo endpoint (see here).
The change password email (which can be templated in Auth0) has a link to the Universal Login "Password Reset" widget. You can use the default widget, which offers some basic styling/branding. Alternatively you can fully customize this with your own SPA e.g. see below:
The default (non branded/styled) password reset widget looks like this:
Related
Is there a way to logout without doing a popup or redirect to the authorization server using oidc-client-ts? I can sign in/out with redirects, but if the session has expired or the token for some reason is invalid, I would like to sign out the user and then go to the applications login page. I cannot see any methods on the UserManager that does this.
I learned from this issue that the base class OidcClient does this with createSignoutRequest(), but as the documentation states, I should
Only use this class if you simply want protocol support without the additional management features of the UserManager class.
so I would prefer to only use the UserManager. Furthermore when I do call createSignoutRequest(), I get a CORS-error, but it is the same url that is used for userManager.signoutRedirectCallback() which works like a charm. I can remove the user and redirect, but the user is not signed out, so clicking the Login-button sends me directly to the main page instead of the auth server.
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.
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.
I'm migrating from Identity Server 3 and I have a question regarding controlling what page is redirected when we need to redirect from the authorize endpoint into the account controller.
The current solution using the PreAuthenticateAsync method on the UserService to look for a custom acr_value key/value in combination with prompt=login on the authorize request.
An example use case is allowing a deep link into the Register page, or into the Manage profile page if the user is logged in.
I cannot find a simple hook for controlling where we go after IDSrvr4 detects a login redirect.
I have found the IAuthorizeInteractionResponseGenerator interface and was wondering if a custom implementation ( or override the default behaviour of one of the ProcessXXXAsync methods from IdentityServer4.ResponseHandling.AuthorizeInteractionResponseGenerator ) is appropriate, but this feels like a sledgehammer approach.
The QuickStart scenario #6 from the IdSrv github repo is a close example of what I want to accomplish if you tried redirect to Register, or the Manage controller if logged in
Thanks in advance
You can configure the page you want to go to for unauthenticated users like this:
services.AddIdentityServer(options => options.UserInteraction.LoginUrl = "/account/login");
For sending authenticated users back to that page you need to to implement IAuthorizeInteractionResponseGenerator - or rather derive from the default one.
As per google doc:
When the google sign in button is loaded, it immediately checks to see if the user has authorized the application. This check is called "immediate mode" and if successful, the Google servers return an access token and pass a new authorization result object to the callback. If the button cannot make an immediate-mode authorization, the user must click the sign-in button to trigger the access flow.
My Google Plus signin button is part of header and on logout the home
page is loaded,It again renders google plus button resulting in
automatic login. User is never logged out due to this. How is it
possible to allow login when when G Plus button is clicked and not
when when the G Plus buttom reders itself?
The 'immediate' parameter did it for me, although it has the same affect as 'approvalprompt', prompts for consent. Facebook seems to handle these options a little better.
gapi.signin.render("splashGPlusReg", {
'callback': GPSignInCallback,
'clientid': '<yourclientId>',
'cookiepolicy': 'single_host_origin',
'immediate': false,
'requestvisibleactions': 'http://schemas.google.com/AddActivity',
'scope': '<scopes>'
});
You have two ways to Remove immediate Google Plus Login.
1- not a good approach: use data-approvalprompt="force" in your button. I wrote an example below:
<span id="signinButton" >
<span
class="g-signin g-link"
data-callback="signinCallback"
data-clientid="*****.apps.googleusercontent.com"
data-cookiepolicy="single_host_origin"
data-scope="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read"
data-approvalprompt="force"
style= "cursor:pointer;">
Login With Google
</span>
</span>
It is not a good approach because if you add this, then Google ask a user to give one extra permission for offline access. So it may let user won't signup at all because of this permission.
2- better approach: just signout from Google after receiving response in your signincallback function. just add:
gapi.auth.signOut();
You should write this line after you received the response. It is better to keep it as a last line inside the request.execute(function(resp) function.
By adding this code, Google won't render the login unless someone click on the login button.This approach is recommended by Google too.
I found a way to do this, maybe it's exactly what you want too:
disable automatic authentication for Google+ social sign-in
It's not the cleanest fix, but you can try filtering on the status.method property of the authResult passed into the callback.
Filter any callbacks that are triggered with authResult.status.method set to AUTO, but process any that are null (logged in via single authorized Google account) or PROMPT (user chose one of several Google accounts).