Reactjs AWS Cognito - How to Handle newPasswordRequired - reactjs

I'm using AWS Cognito Javascript SDK in a react application. I have a user that was created in the AWS Console by an admin. The user recieves an email with their username and temporary password. Now based on my understanding, I have to go through the newPasswordRequired flow, but I have been struggling with this for several hours now trying multiple different approaches and none are getting me anywhere. When I check the AWS Console, the user in the user pool is set to FORCE_CHANGE_PASSWORD.
Here is my code in its current state. Please if someone can help me solve the process as I am fairly new to using Cognito authentication.
function setNewPassword(data) {
console.log("data \n", data)
var authenticationData = {
Username: data.username,
Password: data.temp_password
};
var authenticationDetails = new AmazonCognitoIdentity.AuthenticationDetails(
authenticationData
);
var userPool = new AmazonCognitoIdentity.CognitoUserPool(config.cognito);
var userData = {
Username: data.username,
Pool: userPool
};
var cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData);
return new Promise(function(resolve, reject) {
cognitoUser.authenticateUser(authenticationDetails, {
onSuccess: function(result) {
resolve(resolve);
},
onFailure: function(err) {
reject(err);
},
newPasswordRequired: function(userAttributes, requiredAttributes) {
this.cognitoUser.completeNewPasswordChallenge(newPassword, attributesData, this)
}
});
});
}
In the browser console, I am getting the following error:
{code: "UnknownError", message: "Unkown error"}

Have you looked at using the AWS Amplify JS library for help here? There's a suite of React components already built to help with these sorts of things. Here's a link to the relevant documentation. The code is open sourced on GitHub and you might be able to just use the RequireNewPassword component, or at least find inspiration from it.

Related

Google SignIn: Redirect Uri in GSI client flow

I’m trying to use the new Google Identity Services to sign in an user to get access to manage his calendars.
My current auth function looks like this in JS:
const auth = async () => {
return new Promise((resolve) => {
const GTokenClient = google.accounts.oauth2.initTokenClient({
client_id: GOOGLE_CLIENT_ID,
scope: GOOGLE_CALENDAR_SCOPE,
prompt: '',
callback: resolve
});
if (gapi.client.getToken() === null) {
GTokenClient.requestAccessToken({ prompt: 'consent' });
} else {
GTokenClient.requestAccessToken({
prompt: ''
});
}
});
};
In desktop web browsers it works fine and the promise resolves but in smartphones (currently trying with an iPhone12) the browser opens a new tab and it stays there loading after giving permissions.
I’m aware that you can set a redirect with the code flow, but it is possible to do the same with the client flow?
I don’t know what to do honestly because there are no examples to implement this behavior using the client flow in the Google documentation.
I only want to be able to redirect the user to the initial screen, if I close the tab that google creates for signing in the calendar is loaded and everything seems fine, it is just a matter of redirection.

How can I check if user is already Logged in using aws cognito user pool anywhere in project?

I am doing SSO(Single Sign On) in my application. I am making use of AWS cognito for it and user pool and Identity pool for users.
I have setup user pool, identity pool and using hosted UI.
When I am using Custom UI for login and calling below cognito function:
cognitoUser.authenticateUser(authenticationDetails, {
onSuccess: function (result) {
var accessToken = result.getAccessToken().getJwtToken();
AWS.config.region = config.region;
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId : config.IdentityPoolId, // your identity pool id here
Logins : {
'cognito-idp.<region>.amazonaws.com/<pool-id>': result.getIdToken().getJwtToken()
}
});
//refreshes credentials using AWS.CognitoIdentity.getCredentialsForIdentity()
AWS.config.credentials.refresh((error) => {
console.log("in refresh");
if (error) {
console.error(error);
} else {
console.log('Successfully logged!');
}
});
},
onFailure: function(err) {
console.log("in failure");
alert(err.message || JSON.stringify(err));
},
mfaRequired: function(codeDeliveryDetails) {
// MFA is required to complete user authentication.
// Get the code from user and call
console.log("in mfa required");
cognitoUser.sendMFACode(mfaCode, this)
}
});
This works fine but I am not able to redirect user to routes on successful and failure.
I want to use hosted UI.
Now I am able to successfully authenticate user from hosted UI and redirect to URL provided in app client settings callback URL. And getting id_token, access_token in url. I am able to decode it and get username from that.
But when I do:
var AmazonCognitoIdentity = require('amazon-cognito-identity-js');
var userPool = new AmazonCognitoIdentity.CognitoUserPool(config.poolData);
console.log("cog user: ", userPool.getCurrentUser());
I get null.
Is there any way to get current logged in user So that I can identify if user is logged in or not and do next operations accordingly.

Network error when authenticating user with AWS Cognito

I'm trying to incorporate Cognito authentication into my React based project. My code is based on examples given in NPM page. This is what it looks like :
var authenticationData = {
Username : 'username',
Password : 'password',
};
var authenticationDetails = new AmazonCognitoIdentity.AuthenticationDetails(authenticationData);
var poolData = {
UserPoolId : '...', // Your user pool id here
ClientId : '...' // Your client id here
};
var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);
var userData = {
Username : 'username',
Pool : userPool
};
var cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData);
cognitoUser.authenticateUser(authenticationDetails, {
onSuccess: function (result) {
console.log('Successfully logged!');
}
});
},
onFailure: function(err) {
console.log(JSON.stringify(err));
},
});
I have created a user pool and added an app client. I have also enabled identity provider for app client. However, my code fails to authenticate with error {"code":"NetworkError","name":"Error","message":"Network error"}. Since my project is still hosted on a localhost, I have installed CORS plug-in for firefox, but that doesn't resolve the issue. I couldn't make much sense out of this error message. I have double checked Cognito region, pool id and client id. They all set to correct values. Does anyone familiar with this error and have an idea what maybe causing this?
A bit late, but I had exactly the same error today and it took me a while to figure it out. This happens when the automatic refresh occurs after a submit. This prevents the API call to AWS Cognito to finish resulting in a network error.
Before starting the cognito function, add a event.preventDefault(); to your code.
For example, I do this in my addEventListener:
document.querySelector("#authCognito").addEventListener("click", function(){
var username = document.getElementById("userInput").value;
var password = document.getElementById("passInput").value;
var authenticationData = {
Username: username,
Password: password,
};
event.preventDefault();
cognitoAuthenticate(authenticationData);
});
I had the same issue, the following is the fix in Vue
<template>
<button v-on:click="login($event)" class="btn btn-default btn-large">login</button>
</template>
<script>
methods: {
login (event) {
if (event) {
event.preventDefault()
}

Cordova app using angular & ADAL

I'm building my first mobile app using Cordova. The back-end services live on Azure so I'm trying to get authentication working by using the ADAL plugin for Cordova.
First of all I found out that the library does not do intercepts as the ADAL library for Angular does. I'm using Angular within my Cordova app, paired with material design directives for the look-and-feel. Would have been nice to have interception, but as I understood it's just not there at the moment (should find out how hard it is to implement).
So instead I now wrote a service which will take care of sending REST api requests to Azure, including the correct authentication token. It's based on the sample found here.
This is what I came up with:
var request = function(url)
{
createContext()
.then(function () {
getAuthToken().then(
function(token) {
sendRequest(token, url);
})
},
function (err) {
$log.error("Failed to create a context.");
});
};
First it will create the authentication context:
function createContext () {
return $q(function (resolve, reject) {
var authenticationContext = Microsoft.ADAL.AuthenticationContext;
authenticationContext.createAsync(authority)
.then(function (context) {
authContext = context;
$log.log("Created authentication context for authority URL: " + context.authority);
resolve();
}, function (err) {
$log.error("Failed to create authentication context: " + pre(err))
reject();
});
});
};
The using the context it should get the authentication token:
function getAuthToken()
{
if (authContext == null) {
$log.error('Authentication context isn\'t created yet. Create context first');
return;
}
return $q(function (resolve, reject) {
authContext.acquireTokenAsync(resourceUrl, appId, redirectUrl)
.then(function (authResult) {
resolve(authResult.accessToken);
}, function (err) {
$log.error("Failed to acquire token: " + pre(err));
reject();
});
});
}
And afterwards it should send the request but I'll leave that part out since it never gets there anyway. I feel the need to re-emphasize that I'm a complete n00b at this stuff, so please be easy on me and especially on the code. There's probably a lot of room for improvement, I get that.
When I actually run this, it pops up a window where I need to login using my Microsoft account, cool. I even got two factor authentication first time I tried this, very nice! So I log in and I get returned to the code. But now the authresult variable has a status of "Failed" and there's no access token in the result. Unfortunately there's also no indication of what went wrong. So first part of the question is; what could have gone wrong here?
Now we get to the second part of the question; how do you properly debug these kinds of things? On my desktop I'd run Fiddler to check out the communication, but I don't know how to do that for Android. I'm debugging on my device btw, cause for some reason all of the emulators available to me are extremely slow (VS and Google) even though my hardware specs should support them just fine.
Thanks for any pointers!
Update 03-02-2016
Fiddling around with the code a bit, I decided to pack things in a login function which gives a somewhat shorter sample:
var createContext = function () {
if (authContext == null) {
authContext = new Microsoft.ADAL.AuthenticationContext(authority);
}
};
var getAuthToken = function () {
if (authContext == null) {
$log.error('Authentication context isn\'t created yet. Create context first');
return;
}
return $q(function (resolve, reject) {
authContext.acquireTokenAsync(endpointUrl, appId, redirectUrl)
.then(function (authResult) {
resolve(authResult.accessToken);
}, function (err) {
$log.error("Failed to acquire token: " + pre(err));
reject();
});
});
}
var login = function () {
createContext();
getAuthToken();
}
This code runs on the following input vars:
var authority = 'https://login.windows.net/[tenantid]';
var resourceUrl = 'https://graph.windows.net/';
var appId = '1ef41b17-0943-4359-bc12-014f4fd2d841';
var redirectUrl = 'http://MyApp';
I now used chrome://inspect to see what is going over the wire. And to my big surprise, I see a valid SAML token returned from Azure. It has got my name in it and everything, which I'd recon they wouldn't send after a failed authentication. So it seems that even though the response is ok, the ADAL library doesn't give me a proper response (Status = Failed). Again no clue on how to proceed :S
I just solved it. And like one would expect, the remedy is as simple as they get. Configuring the application in Azure AD, I chose the "web application" type application, since this is a web application with Angular and all. Now I guess since Cordova translates things to native code, that's not the correct option to chose. As soon as I created a new application as "native application" instead and used the client ID of that one, everything started working.... Sincerely hope this will help someone else in the future...!
I had a very similar issue where I was trying to access a web api from a Cordova app. I was using the App ID Uri for the web api I wanted to access as the resouceURL when calling acquireTokenAsync. When I changed this to the client Id of the Web Api instead it worked.

Firebase createUser() does not return id of created user

I'm using Firebase 1.1 (which embeds old firebase-simple-login functionalities).
Now, when creating a user, how do I get it's id (or uid)?
app.controller('AuthCtrl', function ($scope, $firebase) {
var ref = new Firebase(MY_FIREBASE_URL);
ref.createUser({
email: 'mary#mail.com',
password: 'her-super-secret-password'
},
function(err) {
switch (err.code) {
...
}
}
}
As far as I can understand, createUser function callback only reports an err object in case of error. But - in case of success - I need the created user id (or better uid), to use it to add the user to my internal users profiles...
How do I get created user id from Firebase createUser ?
UPDATE:
I did just give up with 1.1, reverting to 1.0 until some more docs are available (or some answer I get...) :-(
Firebase recently released an updated JavaScript client (v2.0.5) which directly exposes the user id of the newly-created user via the second argument to the completion callback.
Check out the changelog at https://www.firebase.com/docs/web/changelog.html and see below for an example:
ref.createUser({
email: '...',
password: '...'
}, function(err, user) {
if (!err) {
console.log('User created with id', user.uid);
}
});

Resources