React Native how to restore a firebase session with tokenid - react-native

How can I restore a sessionid in Firebase auth?
public async saveSessionId() {
return auth().currentUser?.getIdToken().then((id) => {
this.sessionId = id;
AsyncStorage.setItem('#tokenid', this.sessionId);
});
}
public async signInWithSessionId() {
const credential = firebase.auth.???.credential(this.sessionId);
return auth().signInWithCredential(credential);
}
Is there any provider or any method for reload session after reload the program?

Maybe this one method will help you to reload the session.
public async signInWithSessionId() {
const credential = firebase.auth().signInWithCustomToken(this.sessionId);
return credential.user;
}

Related

cognito custom auth (CUSTOM_CHALLENGE) ignore retry because session expiration

my goal is to implement otp by sending a sms to user mobile. im able to achieve this using cognito custom auth flow, but, only works if the user success in the firts attemp, if the user enter a bad code, the session is gonna expire and a new code is required to be sent again, bad ux. i do need at least 3 attemps, which in theory are 3 sessions across this cognito auth flow.
im gonna share the four cognito lambdas (cognito triggers) i used for this: preSignUp, defineAuthChallenge, createAuthChallenge and verifyChanllenge
// preSignUp lambda
exports.handler = async (event) => {
event.response.autoConfirmUser = true;
event.response.autoVerifyPhone = true;
return event;
};
// defineAuthChallenge
exports.handler = async (event, context, callback) => {
if (event.request.session.length >= 3 && event.request.session.slice(-1)[0].challengeResult === false) {
// wrong OTP even After 3 sessions? FINISH auth, dont send token
event.response.issueToken = false;
event.response.failAuthentication = true;
} else if (event.request.session.length > 0 && event.request.session.slice(-1)[0].challengeResult === true) {
// Last answer was Correct! send token and FINISH auth
event.response.issueTokens = true;
event.response.failAuthentication = false;
} else {
// INIT flow - OR - not yet received correct OTP
event.response.issueTokens = false;
event.response.failAuthentication = false;
event.response.challengeName = 'CUSTOM_CHALLENGE';
}
return event;
};
// createAuthChallenge
exports.handler = async (event, context) => {
if (!event.request.session || event.request.session.length === 0) {
// create only once the otp, send over sms only once
var otp = generateOtp();
const phone = event.request.userAttributes.phone_number;
sendSMS(phone, otp);
} else {
// get previous challenge answer
const previousChallenge = event.request.session.slice(-1)[0];
otp = previousChallenge.challengeMetadata;
}
event.response = {
...event.response,
privateChallengeParameters: {
answer: otp
},
challengeMetadata: otp // save it here to use across sessions
};
return event
}
// verifyChanllenge
exports.handler = async (event, context) => {
event.response.answerCorrect = event.request.privateChallengeParameters.answer === event.request.challengeAnswer;
return event
}
for the client, which is a RN app, im using amplify, this is the flow in the app:
// SignIn form screen
import { Auth } from "aws-amplify";
const signUp = (phone) => {
Auth.signUp({
username: phone,
/** dummy pass since its required but unused for OTP */
password: "12345678"
}).then(() => {
// after signup, go an automatically login (which trigger sms to be sent)
otpSignIn(phone);
}).catch(({code}) => {
// signup fail because user already exists, ok, just try login it
if (code === SignUpErrCode.USER_EXISTS) {
otpSignIn(phone)
} else {
...
}
})
}
const otpSignIn = async (phoneNumber) => {
const cognitoUser = await Auth.signIn(phoneNumber)
setCognitoUser(cognitoUser);
navigate("ConfirmNumber", {phoneNumber});
}
import { Auth } from "aws-amplify";
let cognitoUser;
export function setCognitoUser(user) {
console.log('setCognitoUser', user)
cognitoUser = user;
}
export function sendChallenge(challengeResponse) {
return Auth.sendCustomChallengeAnswer(cognitoUser, challengeResponse)
}
// Confirm number screen
const onChangeText = (value) => {
if (value.length === 4) {
try {
const user = await sendChallenge(value)
// WEIRD THING NUMBER 1
// when the user send the second attempt, no error is raised, this promise is resolve!
// even when the trigger *verifyChanllenge* is returning false.
} catch (err) {
// WEIRD THING NUMBER 2
// from the trigger *createAuthChallenge* if i define the anser in the if block,
// and not store such answer for future use (i do that in else block), then,
// for the second..third attempt the error raised here is that *Invalid session for user* which mean session has expired,
// what i need is to persist session until third attempt
}
}
}
// this is amplify config: try 1
const awsExports = {
Auth: {
region: ...,
userPoolId: ...,
userPoolWebClientId: ...,
authenticationFlowType: 'CUSTOM_AUTH',
},
...
}
Amplify.configure(awsExports);
// this is amplify config: try 2
import {Auth} from "aws-amplify"
Auth.configure({
authenticationFlowType: 'CUSTOM_AUTH'
});
everything is correct in the code above, and the config for amplify authenticationFlowType: 'CUSTOM_AUTH' is not necessary.
the problem is that Auth.sendCustomChallengeAnswer(cognitoUser, challengeResponse) is not raising an error when the trigger defineAuthChallenge set this combination:
event.response.issueTokens = false;
event.response.failAuthentication = false;
event.response.challengeName = 'CUSTOM_CHALLENGE';
which presents the next attempt.
so i found a way to check the error when the user fail the otp:
const sendCode = async (value) => {
try {
// send the answer to the User Pool
// this will throw an error if it's the 3rd wrong answer
const user = await sendChallenge(value);
// the answer was sent successfully, but it doesnt mean it is the right one
// so we should test if the user is authenticated now
// this will throw an error if the user is not yet authenticated:
await Auth.currentSession();
} catch (err) {
setError(true);
}
}

Auth0 re-login after token expire does not display login window

I'm working with Auth0, I have a problem where after user token expire and user try to relogin, it doesn't redirect user to login window at all instead it just automatically logged in when user click on login link.
They are fine if I manually log out then re-login, then it will ask for authentication again.
I tried removing all the localstorage memory regarding the user but it still doesn't fix it.
export const expiredAtKey = 'expired_at';
export const uidKey = 'uid';
export const urlStateKey = 'urlState';
#Injectable()
export class Auth {
auth0 = new auth0.WebAuth({
clientID: environment.auth0ClientId,
domain: environment.auth0Domain,
responseType: 'token id_token',
redirectUri: `${constants.ORIGIN_URL}/auth`,
scope: 'openid email'
});
constructor(private router: Router,
public dialog: MatDialog,
private http: HttpClient) {
}
public handleAuthentication(): void {
this.auth0.parseHash(this.handleAuthResult);
}
public login() {
//I have tried to clear local storage everytime user call login to prevent this to happen, but it still skip the login window
this.clearLocalStorage();
localStorage.setItem(urlStateKey, location.pathname);
this.auth0.authorize();
};
public signUp(email, password, cb) {
this.auth0.signupAndAuthorize({
email: email,
password: password,
connection: environment.auth0Connection
}, cb);
}
public authenticated() {
const exp = localStorage.getItem(expiredAtKey);
if (!exp) {
return false;
}
const expiresAt = JSON.parse(localStorage.getItem(expiredAtKey));
return new Date().getTime() < expiresAt;
};
public logout() {
this.clearLocalStorage();
window.location.href = `https://${ environment.auth0Domain }/v2/logout?returnTo=${ constants.ORIGIN_URL }`;
};
public setSession(authResult): void {
const idToken = jwtDecode(authResult.idToken);
localStorage.setItem('idToken', authResult.idToken);
localStorage.setItem(uidKey, idToken.email);
localStorage.setItem('userId', idToken.sub);
const expiresAt = JSON.stringify(idToken.exp * 1000);
localStorage.setItem(expiredAtKey, expiresAt);
}
private handleAuthResult = (err, authResult) => {
if (err) {
if (!environment.production) {
console.log(err);
}
if(err.errorDescription === "Please verify your email before logging in."){
this.dialog.open(
ErrorDialogComponent,
{ data: "Please verify your email before logging in."}
);
this.router.navigate(['/initiatives'])
}else{
this.dialog.open(
ErrorDialogComponent,
{ data: "An error occurred while trying to authenticate. Please ensure private browsing is disabled and try again."}
);
this.router.navigate(['/initiatives'])
}
} else if (authResult && authResult.idToken && authResult.idToken !== 'undefined') {
this.setSession(authResult);
const path = localStorage.getItem(urlStateKey);
this.router.navigateByUrl(path);
}
};
clearLocalStorage() {
localStorage.removeItem(expiredAtKey);
localStorage.removeItem(uidKey);
localStorage.removeItem(urlStateKey);
localStorage.removeItem('userId')
}
}
I want user to do the authentication again after the token is expired.
This is happening due to SSO cookie set in the server to maintain the session. To clear the server-side session, you need to redirect the user to /logout endpoint when token expires. The logout method does that.
https://auth0.com/docs/sso/current/single-page-apps

How to persist CognitoUser during signIn with CUSTOM_AUTH authentication flow

My React Native app uses Amplify for a CUSTOM_AUTH authentication flow. The user receives a link via email to satisfy a challengeAnswer request. The process is like this:
User initiatiates sign in:
const cognitoUser = await Auth.signIn(username);
Email is sent to user via lambda.
User leaves app to retrieve email.
User clicks a link in the email which routes user back to the app via the RN Linking api.
The code from the link is processed with:
await Auth.sendCustomChallengeAnswer(
cognitoUser,
authChallengeAnswer
);
Usually this works well, but there is no guarantee that the cognitoUser object will exist after the app has been backgrounded while the user retrieves the email. There is a non-zero chance that iOS could dump the app during this time, and the cognitoUser var would be gone forcing the user to restart the sign in process. I'm looking for a way to persist the cognitoUser object somehow so if iOS decides the app needs to die this var can be retrieved from cache.
I'm able to cache the object into the Amplify cache (AsyncStorage) with
await Cache.setItem("cognitoUser", cognitoUser);
then fetch with
await Cache.getItem("cognitoUser");
which fails with
TypeError: user.sendCustomChallengeAnswer is not a function
because the process of caching it lost all its __proto__ functions. Its just retrieved as a basic object.
I suspect the cause is that I'm not using TypeScript, and the object loses some type information somehow.
Is there a better way of persisting this CognitoUser object so I can guarantee it exists after the user leaves/returns to the app as is needed in a CUSTOM_AUTH flow.
I use the following code to persist CognitoUser during sign in with CUSTOM_AUTH authentication flow:
import Auth from '#aws-amplify/auth'
import { CognitoUser } from 'amazon-cognito-identity-js'
const CUSTOM_AUTH_TTL = 5 * 60 * 1000 // Milliseconds
interface CustomAuthSession {
username: string
session: string
// Milliseconds after epoch
expiresAt: number
}
function clearCustomAuthSession() {
window.localStorage.removeItem('CustomAuthSession')
}
function loadCustomAuthSession(): CognitoUser {
const raw = window.localStorage.getItem('CustomAuthSession')
if (!raw) {
throw new Error('No custom auth session')
}
const storedSession: CustomAuthSession = window.JSON.parse(raw)
if (storedSession.expiresAt < window.Date.now()) {
clearCustomAuthSession()
throw new Error('Stored custom auth session has expired')
}
const username = storedSession.username
// Accessing private method of Auth here which is BAD, but it's still the
// safest way to restore the custom auth session from local storage, as there
// is no interface that lets us do it.
// (If we created a new user pool object here instead to pass to a
// CognitoUser constructor that would likely result in hard to catch bugs,
// as Auth can assume that all CognitoUsers passed to it come from its pool
// object.)
const user: CognitoUser = (Auth as any).createCognitoUser(username)
// Session is not exposed to TypeScript, but it's a public member in the
// JS code.
;(user as any).Session = storedSession.session
return user
}
function storeCustomAuthSession(cognitoUser: CognitoUser) {
// Session isn't exposed to TypeScript, but it's a public member in JS
const session = (cognitoUser as any).Session
const expiresAt = window.Date.now() + CUSTOM_AUTH_TTL
const otpSession: CustomAuthSession = {
session,
expiresAt,
username: cognitoUser.getUsername(),
}
const json = window.JSON.stringify(otpSession)
window.localStorage.setItem('CustomAuthSession', json)
}
You can reconstruct the CognitoUser object manually from your serialized object in localStorage or cache:
import { CognitoUser, CognitoUserPool } from 'amazon-cognito-identity-js';
const pool = new CognitoUserPool({
UserPoolId: cognitoObject.pool.userPoolId,
ClientId: cognitoObject.pool.clientId,
endpoint: cognitoObject.client.endpoint,
Storage: window.localStorage,
AdvancedSecurityDataCollectionFlag: cognitoObject.advancedSecurityDataCollectionFlag,
})
const cognitoUser = new CognitoUser({
Username: cognitoObject.username,
Pool: pool,
Storage: window.localStorage,
})
cognitoUser.Session = cognitoObject.Session
await Auth.completeNewPassword(cognitoUser, newPassword, cognitoObject.challengeParams)
Had to add the import statement myself, but got the general idea here: https://github.com/aws-amplify/amplify-js/issues/1715#issuecomment-800999983
I had this same issue and the simplest solution was to store it as a global variable within the slice.
authSlice.ts:
// we use this to temporarily store CognitoUser for MFA login.
// CognitoUser is not serializable so we cannot store it on Redux.
let cognitoUser = {};
export const doLogin = createAsyncThunk(
"auth/login",
async ({ email, password }: UserCredentials): Promise<Login | MFA> => {
const res = await Auth.signIn(email, password);
if (res.challengeName === "SOFTWARE_TOKEN_MFA") {
// we use this to temporarily store CognitoUser for MFA login.
// CognitoUser is not serializable so we cannot store it on Redux.
cognitoUser = res;
return {
status: "MFA",
user: null,
};
} else {
const user = await getUser();
return { user, status: "OK" };
}
}
);
export const confirmMFA = createAsyncThunk("auth/confirmMFA", async ({ mfa }: UserMFA) => {
if (!cognitoUser) {
throw new Error("Invalid flow?!");
}
await Auth.confirmSignIn(cognitoUser, mfa, "SOFTWARE_TOKEN_MFA");
const user = await getUser();
return { user, status: "OK" };
});
const getUser = async (): Promise<User> => {
const session = await Auth.currentSession();
// #ts-ignore https://github.com/aws-amplify/amplify-js/issues/4927
const { accessToken } = session;
if (!accessToken) {
throw new Error("Missing access token");
}
setCredentials(accessToken.jwtToken);
const user = await Auth.currentAuthenticatedUser();
return user.attributes;
};
Our requirement was also the same and we managed to get the customAuth flow working by creating cognitoUserPool and cognitoUser instance from localStorage/sessionStorage before calling sendCustomChallengeAnswer.
Example:
const userPoolData = {
Attributes: values(from localStorage);
}
const cognitoUserPool = new CognitoUserPool(userPoolData);
const userData = {
Attributes: values(from localStorage);
}
const cognitoUser = new CognitoUser(userData);
Auth.sendCustomChallengeAnswer(cognitoUser, validationCode);

How to use c8yClient code in the Angular 6 App (typescript file)

For Example:
import { Client } from '#c8y/client';
const baseUrl = 'https://demos.cumulocity.com/';
const tenant = 'demos';
const user = 'user';
const password = 'pw';
(async () => {
const client = await Client.authenticate({
tenant,
user,
password
}), baseUrl);
const { data, paging } = await client.inventory.list();
// data = first page of inventory
const nextPage = await paging.next();
// nextPage.data = second page of inventory
})();
Consider that I have login module in an angular 6 application. How to use this above code and authenticate the user in the login.component.ts file?
Cumulocity has released a demo on Stackblitz how to log in the user. Basically you build a ngForm with username, password and tenant and pass that to the Cumulocity client:
async login() {
const client = new Client(new BasicAuth(
{
user: this.model.user,
password: this.model.password,
tenant: this.model.tenant
}),
`https://${this.model.tenant}.cumulocity.com`
);
try {
let user = await client.user.current();
this.cumulocity.client = client;
} catch (ex) {
this.cumulocity.client = null;
this.error.shown = true;
this.error.msg = ex.message;
}
}
In this case this.model is the data coming from an ngFrom and on button click the login()? function is executed. The this.cumulocity variable contains a service so that you can share the logged in client with other components.
Note: If you run this on a different server (not hosted), then you need to enable CORS in the Cumulocity administration.

Angular with Azure AD B2C Audience Validation Failed

I have an Anuglar5 spa frontend and ASP.NET Core API. Both secured by Azure AD B2C service. The angular application redirects correctly to the login page and signing in returns a token. When I try to call the API with the token I get;
AuthenticationFailed: IDX10214: Audience validation failed. Audiences: '627684f5-5011-475a-9cbd-55fcdcdf369e'. Did not match: validationParameters.ValidAudience: 'ee8b98a0-ae7a-38b2-9e73-d175df22ef4c' or validationParameters.ValidAudiences: 'null'.
"627684f5-5011-475a-9cbd-55fcdcdf369e" is the Application ID of the frontend app. And "ee8b98a0-ae7a-38b2-9e73-d175df22ef4c" is the Application ID of the API.
My code;
`export class MSALService {
private applicationConfig: any = {
clientID: '627684f5-5011-475a-9cbd-55fcdcdf369e',
authority: 'https://login.microsoftonline.com/tfp/mytenant.onmicrosoft.com/B2C_1_my_signin_signup',
b2cScopes: ['https://meeblitenant.onmicrosoft.com/api/myapp_read', 'https://meeblitenant.onmicrosoft.com/api/myapp_write'],
redirectUrl: 'http://localhost:4200/'
};
private app: any;
public user: any;
constructor() {
this.app = new UserAgentApplication(this.applicationConfig.clientID, this.applicationConfig.authority,
(errorDesc, token, error, tokenType) => {
console.log(token);
},
{ redirectUri: this.applicationConfig.redirectUrl }
);
}
public login() {
let tokenData = '';
this.app.loginRedirect(this.applicationConfig.b2cScopes).then(data => { tokenData = data; });
}
public getUser() {
const user = this.app.getUser();
if (user) {
return user;
} else {
return null;
}
}
public logout() {
this.app.logout();
}
public getToken() {
return this.app.acquireTokenSilent(this.applicationConfig.b2cScopes)
.then(accessToken => {
console.log(accessToken);
return accessToken;
}, error => {
return this.app.acquireTokenPopup(this.applicationConfig.b2cScopes)
.then(accessToken => {
return accessToken;
}, err => {
console.error(err);
});
}
);
}
}`
Using the token that is returned in Postman also returns the same error. My theory is that the URL I am using to call Azure AD B2C is the problem but looking through the docs I cannot find the problem.
Any help would be greatly appreciated.
Kinda sounds like you are sending the Id token to the API (which is meant for your front-end) instead of an access token. You can debug the issue further by decoding the token you get at https://jwt.ms.
There the aud (audience) should match your API's id, and the scopes you asked should also be there.