I'm getting the error below. My problem is NOT with the actual error but the fact that it is saying that the error was Uncaught. If you take a look at my auth.service.ts and sign-in.component.ts files I am catching the error.
My question is, why am getting the Error: Uncaught (in promise) error in the console? What am I missing?
I'm using
"#angular/fire": "^7.0.4"
"firebase": "^9.0.2"
"rxjs": "6.6.7"
auth.service.ts
/**
* Sign in
*
* #param credentials
*/
signIn(credentials: { email: string; password: string }): Promise<any>
{
return this.auth.signInWithEmailAndPassword(credentials.email, credentials.password)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
//console.log(user);
// Store the access token in the local storage
userCredential.user.getIdToken().then(token => {
this.accessToken = token;
//console.log(token);
})
// Set the authenticated flag to true
this._authenticated = true;
// Store the user on the user service
//this._userService.user = user;
// ...
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
console.log('Show Error', error.code);
throw errorCode;
});
}
sign-in.component.ts
/**
* Sign in
*/
signIn(): void
{
// Return if the form is invalid
if ( this.signInForm.invalid )
{
return;
}
// Disable the form
this.signInForm.disable();
// Hide the alert
this.showAlert = false;
// Sign in
this._authService.signIn(this.signInForm.value)
.then(
() => {
// Set the redirect url.
// The '/signed-in-redirect' is a dummy url to catch the request and redirect the user
// to the correct page after a successful sign in. This way, that url can be set via
// routing file and we don't have to touch here.
const redirectURL = this._activatedRoute.snapshot.queryParamMap.get('redirectURL') || '/signed-in-redirect';
// Navigate to the redirect url
this._router.navigateByUrl(redirectURL);
},
(response) => {
console.log('error from auth.service', response);
// Re-enable the form
this.signInForm.enable();
// Reset the form
this.signInNgForm.resetForm();
// Set the alert
this.alert = {
type : 'error',
message: 'Wrong email or password'
};
// Show the alert
this.showAlert = true;
}
);
}
First of all, my native language is not English, so if I write like a fool you know why.
try this:
_authService.service.ts
import { getAuth, signInWithEmailAndPassword, Auth, inMemoryPersistence, browserLocalPersistence } from '#angular/fire/auth';
constructor(private _fireAuth: Auth,) {
/**
* Sign-in
*
* #param credentials
* #param rememberMe
*/
async signIn(credentials: { email: string; password: string }, rememberMe: boolean): Promise<any> {
// firebase Persistence.LOCAL browserLocalPersistence
// firebase Persistence.SESSION browserSessionPersistence
// firebase Persistence.NONE inMemoryPersistence
return new Promise(async (resolve, reject) => {
//Initialize auth()
const auth = getAuth();
// Extra function
if (rememberMe) {
await getAuth().setPersistence(browserLocalPersistence).catch(error => reject(-1));
} else {
await getAuth().setPersistence(inMemoryPersistence).catch(error => reject(-1));
}
signInWithEmailAndPassword(auth, credentials.email, credentials.password).then(async (userCredential) => {
// Signed in
const user = userCredential.user;
console.log(user);
// Store the access token in the local storage
await userCredential.user.getIdTokenResult().then(token => {
this.accessToken = token.token;
console.log(token);
})
// Set the authenticated flag to true
this._authenticated = true;
}).catch(error => reject(error.code));
});
}
Note: As you can see I have added some extra functions that you can remove if you are not interested (setPersistence), this allows you to take into account the user's choice to stay logged in if he wants to, or to remove his login when he closes the tab.
sign-in.component.ts
alert = {
userNotFound : false,
wrongPassword: false,
unknownError : false,
};
/**
* Sign in
*/
signIn(): void
{
// Return if the form is invalid
if ( this.signInForm.invalid )
{
return;
}
// Disable the form
this.signInForm.disable();
// Hide the alert
this.showAlert = false;
// Sign in
this._authService.signIn(this.signInForm.value)
.then(
() => {
// Set the redirect url.
// The '/signed-in-redirect' is a dummy url to catch the request and redirect the user
// to the correct page after a successful sign in. This way, that url can be set via
// routing file and we don't have to touch here.
const redirectURL = this._activatedRoute.snapshot.queryParamMap.get('redirectURL') || '/signed-in-redirect';
// Navigate to the redirect url
this._router.navigateByUrl(redirectURL);
},
(response) => {
console.log('error from auth.service', response);
// Re-enable the form
this.signInForm.enable();
// Reset the form
this.signInNgForm.resetForm();
// Set the alert
if (error === - 1) {
this.alert.unknownError = true;
} else if (error === 'auth/email-not-found' || error === 'auth/user-not-found') {
this.alert.userNotFound = true;
} else if (error === 'auth/wrong-password') {
this.alert.wrongPassword = true;
}
}
);
}
For me, explicitly catching the error as in the above answers still resulted in the error being sent to the console as Uncaught (in Promise). For whatever reason, in addition to sending the error to be caught via Promise.catch, Angular was routing the error through its default ErrorHandler and claiming that the error was uncaught. I had to override the default ErrorHandler with my own, detect that these were FirebaseErrors and then ignore them (since I already had an explicit Promise.catch defined where I needed it).
Some tips in case they are helpful:
Angular only recognizes error handlers defined on the root module. Definitions on child modules seem to be ignored. You get one global error handler that needs to do everything.
The core FirebaseErrors seem to be stored in a rejection property on the main error object. You can detect them like so:
import { ErrorHandler, Injectable } from "#angular/core";
import { FirebaseError } from "firebase/app";
interface AngularFireError extends Error {
rejection: FirebaseError;
}
function errorIsAngularFireError(err: any): err is AngularFireError {
return err.rejection && err.rejection.name === 'FirebaseError';
}
// Not providedIn 'root': needs special handling in app.module to override default error handler.
#Injectable()
export class YourErrorHandler implements ErrorHandler {
handleError(error: any) {
// AngularFire errors should be catchable and handled in components; no need to further process them.
if (!errorIsAngularFireError(error)) {
console.error(error);
}
}
}
And in your root module:
providers: [
...,
{ provide: ErrorHandler, useClass: YourErrorHandler }
],
as Frank mentionned you are throwing an error without catching it back at a higher lever what I would try would be to do as so:
try {
this._authService.signIn(this.signInForm.value)
.then(
() => {
// Set the redirect url.
// The '/signed-in-redirect' is a dummy url to catch the request and redirect the user
// to the correct page after a successful sign in. This way, that url can be set via
// routing file and we don't have to touch here.
const redirectURL = this._activatedRoute.snapshot.queryParamMap.get('redirectURL') || '/signed-in-redirect';
// Navigate to the redirect url
this._router.navigateByUrl(redirectURL);
},
(response) => {
console.log('error from auth.service', response);
// Re-enable the form
this.signInForm.enable();
// Reset the form
this.signInNgForm.resetForm();
// Set the alert
this.alert = {
type : 'error',
message: 'Wrong email or password'
};
// Show the alert
this.showAlert = true;
}
);
} catch(e) {}
just surround your code with a try catch block so the error is muted. I didn't tested it but maybe calling another catch method after then could do the trick still it would be at the same level (Promise level) so I'm not sure it would work.
I would like to refresh my access tokens just before they expire. My API responds with a property to define when the access token expires. For testing purposes, this is set to 2 minutes.
Since I know when the access token is due to expire, I prefer to handle this before the user gets a 401 so when the user logs in, a setTimeout is set like so:
async login(userName: string, password: string): Promise<Token> {
const request: AccountLogin = {
userName,
password,
};
const result = await this.axios.post(`${this.apiUrl}/auth/login`, request);
const token = this.jsonConvert.deserializeObject(result.data, Token);
getModule(TokenModule, this.store).setToken(token);
setTimeout(this.tokenService.refresh, token.expires * 1000, this);
return token;
}
The setTimeout eventually calls this method:
async refresh(): Promise<void> {
debugger;
console.log('refreshed');
let token = getModule(TokenModule, this.store).token!;
const request: RefreshTokenRequest = {
refreshToken: token.refreshToken,
};
const result = await this.axios.post(`${this.apiUrl}/token/refresh`, request);
token = this.jsonConvert.deserializeObject(result.data, Token);
getModule(TokenModule, this.store).setToken(token);
}
The debugger line is hit and a log appears in the console. However when it tries to retrieve the token from the store I get this error:
Error: ERR_STORE_NOT_PROVIDED: To use getModule(), either the module
should be decorated with store in decorator, i.e. #Module({store: store}) or
store should be passed when calling getModule(), i.e. getModule(MyModule, this.$store)
Without the setTimeout this piece of functionality works. This is my store:
#Module({ name: 'tokenModule' })
export class TokenModule extends VuexModule {
token: Token | null = null;
// eslint-disable-next-line #typescript-eslint/explicit-module-boundary-types
#Mutation
setToken(token: Token) {
this.token = token;
}
}
Does anyone know what I'm doing wrong?
Is their any way to configure discovery document from local host before the login using OIDC-Client in angular 8 application.
I have this manager which is a helper call for the OIDC client
export class AuthenticationService {
#Output() initialized: boolean = false;
static USER_LOADED_EVENT = "USER_LOADED";
static USER_UNLOADED_EVENT = "USER_UNLOADED";
//static USER_SIGNED_OUT_EVENT = "USER_SIGNED_OUT";
//static USER_EXPIRED_EVENT = "USER_EXPIRED";
static USER_RESET_EVENT = "USER_RESET";
private manager: UserManager;
private user: User = null;
private accessToken: Object = null;
private signingOut: boolean = false;
private listeners: Object;
private eventsSubject: Subject<any>;
private events: Observable<any>;
public settings: UserManagerSettings;
constructor(
private $log: Logger,
private tokenHelper: TokenHelperService,
private ngZone: NgZone, private oauthService: OAuthService) {
//Hook up some event notifications
this.listeners = {};
this.eventsSubject = new Subject<any>();
this.events = from(this.eventsSubject);
this.events.subscribe(
({ name, args }) => {
if (this.listeners[name]) {
for (let listener of this.listeners[name]) {
listener(...args);
}
}
});
}
async serviceIsReady(): Promise<void> {
await new Promise((resolve, reject) => {
const source = timer(0, 100).subscribe(t => {
if (this.initialized) {
source.unsubscribe();
resolve(true);
}
else if (t > 5000) {
source.unsubscribe();
reject(false);
}
}, error => {
reject(error);
});
});
}
/**
* Initializes the OIDC Client ready for use by the application.
*/
async initialize(openIdSettings: IOpenIdOptions): Promise<void> {
if (this.initialized) return;
this.ngZone.runOutsideAngular(() => {
this.settings = this.getClientSettings(openIdSettings);
this.manager = new UserManager(this.settings);
//Persist settings for easy access by the silent-renew iframe
window["oidc"] = {
settings: this.settings
};
});
var self = this;
this.manager.events.addAccessTokenExpiring(() => {
this.$log.info("IdSvr token expiring", new Date());
});
this.manager.events.addAccessTokenExpired(() => {
this.$log.info("IdSvr token expired", new Date());
this.logout(false);
//this.broadcast(AuthenticationService.USER_EXPIRED_EVENT);
this.broadcast(AuthenticationService.USER_RESET_EVENT);
});
this.manager.events.addSilentRenewError(e => {
this.$log.warn("IdSvr silent renew error", e.message, new Date());
this.logout(false);
});
this.manager.events.addUserLoaded(user => {
this.$log.info("IdSvr user session is ready", new Date());
this.accessToken = self.tokenHelper.getPayloadFromToken(user.access_token, false);
this.user = user;
this.broadcast(AuthenticationService.USER_LOADED_EVENT, user);
});
this.manager.events.addUserUnloaded(() => {
this.$log.info("IdSvr user session has ended", new Date());
this.broadcast(AuthenticationService.USER_UNLOADED_EVENT);
if (!this.signingOut) {
this.startAuthentication(window.location.pathname + window.location.search);
}
});
this.manager.events.addUserSignedOut(() => {
this.$log.info("IdSvr user signed out", new Date());
this.logout(false);
//this.broadcast(AuthenticationService.USER_SIGNED_OUT_EVENT);
this.broadcast(AuthenticationService.USER_RESET_EVENT);
});
this.user = await this.manager.getUser();
this.initialized = true;
}
/**
* Gets the Authorization header, to be added to any outgoing requests, that needs to be authenticated.
*/
getAuthorizationHeaders(): HttpHeaders {
return new HttpHeaders({ 'Authorization': this.getAuthorizationHeaderValue() });
}
/**
* Checks to see if a user is currently logged on.
*/
isLoggedIn(): boolean {
return this.user != null && !this.user.expired;
}
/**
* Gets all the claims assigned to the current logged on user.
*/
getProfile(): any {
return this.user.profile;
}
/**
* Gets all the claims assigned to the current logged on user.
*/
getAccessToken(): any {
return this.accessToken || this.tokenHelper.getPayloadFromToken(this.user.access_token, false);;
}
/**
* Checks to see if the current logged on user has the specified claim
* #param claimType The type of the claim the user must be assigned
* #param value The value of the claim, uses the wildcard "*", if no value provided.
*/
hasClaim(claimType: string, value?: string): boolean {
var upperValue = value === undefined || value === null
? "*"
: value.toUpperCase();
if (this.isLoggedIn()) {
const claims = this.getAccessToken()[claimType];
if (!claims)
return false;
if (typeof claims === "string")
return claims.toUpperCase() === upperValue;
else if (Object.prototype.toString.call(claims) === "[object Array]")
if (claims.filter((c) => {
return c.toUpperCase() === upperValue;
})
.length >
0)
return true;
}
return false;
}
/**
* Checks to see if the current logged on user has any of the specified claims
* #param claimTypes The type of the claim
* #param value The value of the claim, uses the wildcard "*", if no value provided.
*/
hasAnyClaim(claimTypes: string[], value?: string) {
if (this.isLoggedIn())
return false;
for (let i = 0; i < claimTypes.length; i++) {
if (this.hasClaim(claimTypes[i], value))
return true;
}
return false;
}
/**
* Gets the access token of the current logged on user.
*/
getAuthorizationHeaderValue(): string {
return `${this.user.token_type} ${this.user.access_token}`;
}
/**
* Initiates the logon process, to authenticate the user using Identity Server.
* #param returnUrl The route to load, post authentication.
*/
async startAuthentication(returnUrl: string): Promise<void> {
await this.manager.clearStaleState();
await this.manager.signinRedirect({
data: {
returnUrl: returnUrl
}
}).catch(err => {
this.$log.debug("IdSvr sign in failed", err);
return err;
});
}
/**
* Processes the callback from Identity Server, post authentication.
*/
async completeAuthentication(): Promise<Oidc.User> {
let user = await new Promise<Oidc.User>((resolve, reject) => {
this.ngZone.runOutsideAngular(() => {
this.manager.signinRedirectCallback().then(user => {
resolve(user);
}).catch(error => {
reject(error);
});
});
});
this.$log.debug("IdSvr user signed in");
this.user = user;
return user;
}
// private delay(ms: number): Promise<void> {
// return new Promise<void>(resolve =>
// setTimeout(resolve, ms));
// }
/**
* Logs out the current logged in user.
*/
logout(signoutRedirect?: boolean) {
if (signoutRedirect === undefined || signoutRedirect !== false) {
this.signingOut = true;
signoutRedirect = true;
}
this.manager.stopSilentRenew();
this.manager.removeUser().then(() => {
this.manager.clearStaleState();
this.$log.debug("user removed");
if (signoutRedirect) {
this.manager.signoutRedirect();
}
}).catch(err => {
this.$log.error(err);
});
}
/**
* Gets the current logged in user.
*/
async getUser(): Promise<Oidc.User> {
return await this.manager.getUser();
}
/**
* Gets the Identity Server settings for this client application.
*/
getClientSettings(configuration: IOpenIdOptions): UserManagerSettings {
return {
authority: configuration.authority + '/',
client_id: configuration.clientId,
redirect_uri: configuration.redirectUri,
post_logout_redirect_uri: configuration.redirectUri,
response_type: configuration.responseType, // "id_token token",
scope: "openid profile email " + configuration.apiResourceId,
filterProtocolClaims: true,
loadUserInfo: true,
automaticSilentRenew: true,
monitorSession: true,
silent_redirect_uri: configuration.silentRedirectUri,
accessTokenExpiringNotificationTime: 20, //default 60
checkSessionInterval: 5000, //default 2000
silentRequestTimeout: 20000//default: 10000
};
}
on(name, listener) {
if (!this.listeners[name]) {
this.listeners[name] = [];
}
this.listeners[name].push(listener);
}
broadcast(name, ...args) {
this.eventsSubject.next({
name,
args
});
}
}
export function authenticationServiceFactory(authService: AuthenticationService, appSettings: AppSettingsService) {
return async () => {
await appSettings.serviceIsReady();
await authService.initialize(appSettings.getOpenIdOptions());
}
};
All the configuration settings are inside the getClientSettings method.
Due to some security issue, I am not able to read the discovery document from the okta
Access to XMLHttpRequest at 'https://dev-166545.okta.com/oauth2/aus1igd7yewoAs4xa357/.well-known/openid-configuration' from origin 'https://localhost:44307' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Related problem link
Access to XMLHttpRequest at 'xxx/.well-known/openid-configuration' from origin 'xxxx' has been blocked by CORS
I am looking for a way to configure the discovery document from other location. So that CORS issue won't appear. Is there any way to configure the discovery document in the OIDC-Client library
Did some research on https://github.com/IdentityModel/oidc-client-js and haven't found the configure setting
Tried this configuration but seems not be working
getClientSettings(configuration: IOpenIdOptions): UserManagerSettings {
return {
authority: configuration.authority + '/',
client_id: configuration.clientId,
redirect_uri: configuration.redirectUri,
post_logout_redirect_uri: configuration.redirectUri,
response_type: configuration.responseType, // "id_token token",
scope: "openid profile email " + configuration.apiResourceId,
filterProtocolClaims: true,
loadUserInfo: true,
automaticSilentRenew: true,
monitorSession: true,
silent_redirect_uri: configuration.silentRedirectUri,
accessTokenExpiringNotificationTime: 20, //default 60
checkSessionInterval: 5000, //default 2000
silentRequestTimeout: 20000,//default: 10000
metadata: {
issuer: 'https://dev-166545.okta.com/oauth2/aus1igd7yewoAs4xa357',
jwks_uri: 'https://dev-166545.okta.com/oauth2/aus1igd7yewoAs4xa357/v1/keys',
end_session_endpoint: 'https://dev-166545.okta.com/oauth2/aus1igd7yewoAs4xa357/v1/logout',
authorization_endpoint: 'https://dev-166545.okta.com/oauth2/aus1igd7yewoAs4xa357/v1/authorize'
}, signingKeys: ["HS256", "HS384", "HS512", "RS256", "RS384", "RS512", "ES256", "ES384", "ES512"]
};
}
Reference
https://github.com/IdentityModel/oidc-client-js/issues/275
https://github.com/OHIF/Viewers/issues/616
Here is the discovery documentation that I get from the issuer
https://dev-166545.okta.com/oauth2/aus1igd7yewoAs4xa357/.well-known/openid-configuration
{
"issuer": "https://dev-166545.okta.com/oauth2/aus1igd7yewoAs4xa357",
"authorization_endpoint": "https://dev-166545.okta.com/oauth2/aus1igd7yewoAs4xa357/v1/authorize",
"token_endpoint": "https://dev-166545.okta.com/oauth2/aus1igd7yewoAs4xa357/v1/token",
"userinfo_endpoint": "https://dev-166545.okta.com/oauth2/aus1igd7yewoAs4xa357/v1/userinfo",
"registration_endpoint": "https://dev-166545.okta.com/oauth2/v1/clients",
"jwks_uri": "https://dev-166545.okta.com/oauth2/aus1igd7yewoAs4xa357/v1/keys",
"response_types_supported": ["code", "id_token", "code id_token", "code token", "id_token token", "code id_token token"],
"response_modes_supported": ["query", "fragment", "form_post", "okta_post_message"],
"grant_types_supported": ["authorization_code", "implicit", "refresh_token", "password"],
"subject_types_supported": ["public"],
"id_token_signing_alg_values_supported": ["RS256"],
"scopes_supported": ["monash-identity-api", "openid", "profile", "email", "address", "phone", "offline_access"],
"token_endpoint_auth_methods_supported": ["client_secret_basic", "client_secret_post", "client_secret_jwt", "private_key_jwt", "none"],
"claims_supported": ["iss", "ver", "sub", "aud", "iat", "exp", "jti", "auth_time", "amr", "idp", "nonce", "name", "nickname", "preferred_username", "given_name", "middle_name", "family_name", "email", "email_verified", "profile", "zoneinfo", "locale", "address", "phone_number", "picture", "website", "gender", "birthdate", "updated_at", "at_hash", "c_hash"],
"code_challenge_methods_supported": ["S256"],
"introspection_endpoint": "https://dev-166545.okta.com/oauth2/aus1igd7yewoAs4xa357/v1/introspect",
"introspection_endpoint_auth_methods_supported": ["client_secret_basic", "client_secret_post", "client_secret_jwt", "private_key_jwt", "none"],
"revocation_endpoint": "https://dev-166545.okta.com/oauth2/aus1igd7yewoAs4xa357/v1/revoke",
"revocation_endpoint_auth_methods_supported": ["client_secret_basic", "client_secret_post", "client_secret_jwt", "private_key_jwt", "none"],
"end_session_endpoint": "https://dev-166545.okta.com/oauth2/aus1igd7yewoAs4xa357/v1/logout",
"request_parameter_supported": true,
"request_object_signing_alg_values_supported": ["HS256", "HS384", "HS512", "RS256", "RS384", "RS512", "ES256", "ES384", "ES512"]
}
If CORS is blocked then you'll need to run the following steps.
It is not the correct solution though - you should get your bosses + IT team to instead agree to configure Okta in the standard way for an SPA.
Configure OIDC Client with no authority url
Configure OIDC Client with an explicit issuer + authorization endpoint
Configure OIDC Client to not get user info
Give OIDC Client the token signing keys as data
Use the implicit flow, with response_type=token id_token
Here is a configuration that I used back when Azure AD did not allow CORS requests from SPAs:
// OIDC Settings that work when there is no CORS support
const settings = {
// OIDC client seems to require at least a dummy value for this
authority: 'x',
// Supply these details explicitly
metadata: {
issuer: 'https://sts.windows.net/7f071fbc-8bf2-4e61-bb48-dabd8e2f5b5a/',
authorization_endpoint: 'https://login.microsoftonline.com/7f071fbc-8bf2-4e61-bb48-dabd8e2f5b5a/oauth2/authorize',
},
// When CORS is disabled, token signing keys cannot be retrieved
// The keys must be retrieved first by double hopping from the UI to API to Auth Server
signingKeys: tokenSigningKeys,
// Turn off calls to user info since CORS will block it
loadUserInfo: false,
// The URL where the Web UI receives the login result
redirect_uri: 'https://web.mycompany.com/spa/',
// The no longer recommended implicit flow must be used if CORS is disabled
response_type: 'token id_token',
// Other OAuth settings
client_id: '0ed1c9d0-68e7-4acc-abd1-a0efab2643c8',
scope: 'openid email profile',
} as UserManagerSettings;
this._userManager = new UserManager(settings);
To get the token signing keys the UI will need to double hop via your API to the JWKS endpoint. Note that JWKS keys are public information and getting them does not need securing - this is the JWKS Endpoint for my developer Azure account.
I have an Outlook add-ins using React + TypeScript, debugging locally with Node.js. I'm using the office-js-helpers library to authenticate and the msgraph-sdk-javascript Graph client library. As a POC I'm simply trying to verify that I can successfully call Graph, by retrieving details of the current email by its id. I can successfully use the office-js-helpers Authenticator to authorize the app, and successfully retrieve a token.
However, when I use the Graph client to make a call to v1/me/messages/{ID}, I get:
"401 InvalidAuthenticationToken: Access token validation failure"
I'm not sure whether this is a problem with the way I'm using the Authenticator, or a problem with my add-in or app's manifests. My add-in is using these for AppDomains:
<AppDomains>
<AppDomain>https://localhost:3000</AppDomain>
<AppDomain>https://login.microsoftonline.com</AppDomain>
</AppDomains>
I am using https://localhost:3000 as my app's redirect URI, with implicit auth enabled.
If I use the force option with the authenticate method, I also get this error:
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://login.microsoftonline.com') does not match the recipient window's origin ('https://localhost:3000').
However, I am able to retrieve a token.
What am I doing wrong? I'm not certain about the flow for the Authenticator, in terms of when to use authenticator.tokens.get and authenticator.authenticate. For the first run I assume always authenticate and no need to use tokens.get, and for second run I assume just use tokens.get, but if I try either of those or always both it doesn't seem to change the result of an invalid token.
import * as React from "react";
import { Button, ButtonType, TextField } from "office-ui-fabric-react";
import { Authenticator, Utilities, DefaultEndpoints } from "#microsoft/office-js-helpers";
import * as Graph from "#microsoft/microsoft-graph-client";
export default class GetItemOJSHelpers extends React.Component<any, any> {
constructor(props) {
super(props);
this.getEmail = this.getEmail.bind(this);
this.callGraph = this.callGraph.bind(this);
this.getItemRestId = this.getItemRestId.bind(this);
this.state = { graphResponse: "", accessToken: "" };
console.log("====GetItemOJSHelpers loaded");
}
getEmail() {
console.log("====getEmail(): Entered ");
//debugger;
// Get the access token and create a Microsoft Graph client
let authenticator = new Authenticator();
// register Microsoft (Azure AD 2.0 Converged auth) endpoint
authenticator.endpoints.registerMicrosoftAuth("xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", {
redirectUrl: "https://localhost:3000/index.html",
scope: "Mail.ReadWrite User.Read User.ReadBasic.All"
});
console.log("====getEmail(): Getting token");
let authObject = authenticator.tokens.get("Microsoft");
let accessToken = authObject.access_token;
if (accessToken !== null) {
console.log(`====getEmail(): Current cached token: ${accessToken}`);
this.callGraph(accessToken);
return;
} else {
// for the default Microsoft endpoint
//If the user, rejects the grant to the application then you will receive an error in the catch function.
authenticator
.authenticate(DefaultEndpoints.Microsoft)
.then(function(token) {
/* Microsoft Token */
console.log(`====getEmail(): Authenticated; auth token: ${token.access_token}`);
accessToken = token.access_token;
})
.catch(function(error) {
//debugger;
console.log("====getEmail(): authenticate error");
Utilities.log(error);
throw new Error("Failed to login using your Office 365 Account");
});
}
console.log(`====getEmail(): Current token: ${accessToken}`);
this.callGraph(accessToken);
}
callGraph(token) {
// Get the item's REST ID
let itemId = this.getItemRestId();
console.log(`====callGraph(): itemId ${itemId}`);
const client = Graph.Client.init({
authProvider: done => {
done(null, token); //first parameter takes an error if you can't get an access token
},
debugLogging: true
});
client
.api("me/messages/" + itemId)
.version("v1.0")
.get()
.then(function(item) {
//debugger;
console.log("Email " + item.Subject + " retrieved!!!");
})
.then(function() {
console.log("====callGraph(): complete");
//debugger;
})
.catch(err => {
//debugger;
//403 Forbidden! code: "ErrorAccessDenied", message: "Access is denied. Check credentials and try again."
//Also 401 InvalidAuthenticationToken: Access token validation failure.
console.log(`====callGraph(): error! ${err.statusCode}:'${err.code}': ${err.message}`);
});
}
getItemRestId() {
if (Office.context.mailbox.diagnostics.hostName === "OutlookIOS") {
// itemId is already REST-formatted
return Office.context.mailbox.item.itemId;
} else {
// Convert to an item ID for API v2.0
return Office.context.mailbox.convertToRestId(
Office.context.mailbox.item.itemId,
Office.MailboxEnums.RestVersion.v2_0
);
}
}
render() {
return (
<div>
<Button
id="getEmailButton"
className="ms-welcome__action ms-bgColor-red"
buttonType={ButtonType.primary}
onClick={this.getEmail}
>
Call Graph
</Button>
<div>
<h3> Access Token </h3>
<TextField id="accessToken" />
</div>
<div>
<h3>Graph API Call Response</h3>
<TextField id="graphResponse" />
</div>
</div>
);
}
}
I'm using AWS for my website. After 1 hour the token expires and the user pretty much can't do anything.
For now i'm trying to refresh the credentials like this:
function getTokens(session) {
return {
accessToken: session.getAccessToken().getJwtToken(),
idToken: session.getIdToken().getJwtToken(),
refreshToken: session.getRefreshToken().getToken()
};
};
function getCognitoIdentityCredentials(tokens) {
const loginInfo = {};
loginInfo[`cognito-idp.eu-central-1.amazonaws.com/eu-central-1_XXX`] = tokens.idToken;
const params = {
IdentityPoolId: AWSConfiguration.IdPoolId
Logins: loginInfo
};
return new AWS.CognitoIdentityCredentials(params);
};
if(AWS.config.credentials.needsRefresh()) {
clearInterval(messwerte_updaten);
cognitoUser.refreshSession(cognitoUser.signInUserSession.refreshToken, (err, session) => {
if (err) {
console.log(err);
}
else {
var tokens = getTokens(session);
AWS.config.credentials = getCognitoIdentityCredentials(tokens);
AWS.config.credentials.get(function (err) {
if (err) {
console.log(err);
}
else {
callLambda();
}
});
}
});
}
the thing is, after 1hour, the login token gets refreshed without a problem, but after 2hrs i can't refresh the login token anymore.
i also tried using AWS.config.credentials.get(), AWS.config.credentials.getCredentials() and AWS.config.credentials.refresh()
which doesn't work either.
The error messages i'm getting are:
Missing credentials in config
Invalid login token. Token expired: 1446742058 >= 1446727732
After almost 2 weeks i finally solved it.
You need the Refresh Token to receive a new Id Token. Once the Refreshed Token is acquired, update the AWS.config.credentials object with the new Id Token.
here is an example on how to set this up, runs smoothly!
refresh_token = session.getRefreshToken(); // you'll get session from calling cognitoUser.getSession()
if (AWS.config.credentials.needsRefresh()) {
cognitoUser.refreshSession(refresh_token, (err, session) => {
if(err) {
console.log(err);
}
else {
AWS.config.credentials.params.Logins['cognito-idp.<YOUR-REGION>.amazonaws.com/<YOUR_USER_POOL_ID>'] = session.getIdToken().getJwtToken();
AWS.config.credentials.refresh((err)=> {
if(err) {
console.log(err);
}
else{
console.log("TOKEN SUCCESSFULLY UPDATED");
}
});
}
});
}
Usually it's solved by intercepting http requests with additional logic.
function authenticationExpiryInterceptor() {
// check if token expired, if yes refresh
}
function authenticationHeadersInterceptor() {
// include headers, or no
}}
then with use of HttpService layer
return HttpService.get(url, params, opts) {
return authenticationExpiryInterceptor(...)
.then((...) => authenticationHeadersInterceptor(...))
.then((...) => makeRequest(...))
}
It could be solved by proxy as well http://2ality.com/2015/10/intercepting-method-calls.html
In relation to AWS:
https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/Credentials.html
You're interested in:
getPromise()
refreshPromise()
Here is how I implemented this:
First you need to authorize the user to the service and grant permissions:
Sample request:
Here is how I implemented this:
First you need to authorize the user to the service and grant permissions:
Sample request:
POST https://mydomain.auth.us-east-1.amazoncognito.com/oauth2/token&
Content-Type='application/x-www-form-urlencoded'&
Authorization=Basic aSdxd892iujendek328uedj
grant_type=authorization_code&
client_id={your client_id}
code=AUTHORIZATION_CODE&
redirect_uri={your rediect uri}
This will return a Json something like:
HTTP/1.1 200 OK
Content-Type: application/json
{"access_token":"eyJz9sdfsdfsdfsd", "refresh_token":"dn43ud8uj32nk2je","id_token":"dmcxd329ujdmkemkd349r", "token_type":"Bearer", "expires_in":3600}
Now you need to get an access token depending on your scope:
POST https://mydomain.auth.us-east-1.amazoncognito.com/oauth2/token
Content-Type='application/x-www-form-urlencoded'&
Authorization=Basic aSdxd892iujendek328uedj
grant_type=client_credentials&
scope={resourceServerIdentifier1}/{scope1} {resourceServerIdentifier2}/{scope2}
Json would be:
HTTP/1.1 200 OK
Content-Type: application/json
{"access_token":"eyJz9sdfsdfsdfsd", "token_type":"Bearer", "expires_in":3600}
Now this access_token is only valid for 3600 secs, after which you need to exchange this to get a new access token. To do this,
To get new access token from refresh Token:
POST https://mydomain.auth.us-east-1.amazoncognito.com/oauth2/token >
Content-Type='application/x-www-form-urlencoded'
Authorization=Basic aSdxd892iujendek328uedj
grant_type=refresh_token&
client_id={client_id}
refresh_token=REFRESH_TOKEN
Response:
HTTP/1.1 200 OK
Content-Type: application/json
{"access_token":"eyJz9sdfsdfsdfsd", "refresh_token":"dn43ud8uj32nk2je", "id_token":"dmcxd329ujdmkemkd349r","token_type":"Bearer", "expires_in":3600}
You get the picture right.
If you need more details go here.
This is how you can refresh access token using AWS Amplify library:
import Amplify, { Auth } from "aws-amplify";
Amplify.configure({
Auth: {
userPoolId: <USER_POOL_ID>,
userPoolWebClientId: <USER_POOL_WEB_CLIENT_ID>
}
});
try {
const currentUser = await Auth.currentAuthenticatedUser();
const currentSession = currentUser.signInUserSession;
currentUser.refreshSession(currentSession.refreshToken, (err, session) => {
// do something with the new session
});
} catch (e) {
// whatever
}
};
More discussion here: https://github.com/aws-amplify/amplify-js/issues/2560.