Keycloak: Update user password in AngularJS application - angularjs

I'm building an AngularJS application protected by Keycloak.
Each user should update his password within his user profile.
Calling the Keycloak API for password
GET /auth/realms/{realm_name}/account/password
returns HTML content from Keycloak.
I would like to build my own form to update a user's password.
In the Keycloak documentation I found
POST /auth/realms/{realm_name}/account/password
which requires the attributes
{
'password' => user's current password
'password-new' => new password
'password-confirm' => new password again
'stateChecker' => token from keycloak
}
Calling
POST /auth/realms/{realm_name}/account/password
without the 'stateChecker' attribute causes an error. This attribute is needed.
So here are my questions:
How do I get the value for stateChecker from keycloak for the logged in user (in Keycloak it's in a hidden input field)?
Is there another possibility to change a user's password with a REST API call?
Thanks in advance.
Note:
Calling:
POST /auth/realms/{realm_name}/account/password
with hard coded attributes and values
{
'password': 'somepasswd',
'password-new': 'someNEWpasswd',
'password-confirm': 'someNEWpasswd',
'stateChecker': '<token copied and pasted from keycloak>',
}
is working!

My advice would be to overwrite the keycloak theme (check this out: http://docs.jboss.org/keycloak/docs/1.2.0.Beta1/userguide/html/themes.html).
You can extend and modify the existing forms to look like the rest of your application.

Finally I ended up with an own implementation of a rest endpoint using keycloaks admin rest api.
Building an own theme could be a solution too, as Lisa stated.

Related

Facebook Login with Cognito User Pools using Amplify's federatedSignIn

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.

Salesforce Auth provider issue for experience users

i am trying to set AWS Cognito as Auth provider to log in salesforce.
I have set up an "Auth Provider" (called it Cognito) enabled it as login option both for salesforce login and for community (in community workspace).
Auth provider settings
When i try to login to salesforce using Cognito credentials i manage to do it without issues, but when i click on "Cognito" as a login option in my community i get an error even before i try to enter my credentials:
Trying to log in
Error and url string
I use different credentials for user that is internal and user that is external, although in case of community login i did not even manage to enter my creds. In url string i see that error is "redirect_mismatch" but i am not sure what that means in current context and how to resolve it. In my Registration helper i have only adjusted "createUser" method to return a user that i already have in my org:
global User createUser(Id portalId, Auth.UserData data){
return [SELECT Id, Name, ContactId FROM User WHERE FederationIdentifier = :data.email];
}
If someone has experience with using Cognito as auth provider for salesforce communities i will be glad for any help.
Redirect mismatch is referring to your callback URL being different than the one you defined in your user pool settings. Go to user pool settings and click on app client settings. Here you will see fields for sign in and sign out urls. Put in the correct callback/redirect url here. You can enter multiple urls separated by commas.

auth0 universal reset password page, React

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:

How to pass password value to wordpress using POST in JSON User API

I'm trying to create a registration page using ReactJS and WordPress. to create a user I use a plugin called JSON User API.
Link: https://wordpress.org/plugins/json-api-user/
I pass the password using POST request like this
https://localhost:8080/api/user/register/?username=test&email=test#test.com&password=test&nonce=0d1faff3b5&insecure=cool
it created the user however the password didn't save and I need to manually generate the password on the wordpress dashboard
wordpress-dashboard-user-setting
Is there a way to disable the generate password of WordPress or directly save the password to WordPress?
I just reviewed the API documentation at https://wordpress.org/plugins/json-api-user/
It's says for method register you can pass a GET variable 'user_pass'. I included screeshot from source below.
https://localhost:8080/api/user/register/?username=test&email=test#test.com&user_pass=test&nonce=0d1faff3b5&insecure=cool

Angular Adal how to retrieve the username or email

I have written an angular js app that I am using angular-adal.js to authenticate against Azure AD. I have configured all routes to requireADLogin and also added
extraQueryParameter: 'nux=1,scope=openid'
in the init method.
My question is where can I pull the logged in username or email etc from to store against the records they are creating after they've logged in. Because I am not manually authenticating in code I don't have a token object or anything to play with. Any pointers would be appreciated as although I've searched all the exmaples seem to be when you are making the calls yourself rather than letting UI Router do the authentication.
I'm sure this must be a common thing to do though!!
Thanks in advance!
After we sign-in the Angular application using ADAl library, it provides userInfo object which we can get the information about the user. And we can get the userName from this object directly.
Here is the code and figure for your reference:
$scope.printUserName = function () {
console.log(adalAuthenticationService.userInfo.userName);
};
The Microsoft also provide a code sample for the Angular application, you can refer it from here.

Resources