Develop Reference

Auth0 with Vue not staying logged in after refresh on mobile devices

I am using Auth0 with a Vue application. Auth0 is acting strange and I have no idea where to begin.
If I am on a computer, then when switching pages in my app, the user gets logged out for a few seconds, the page loads and then Auth0 "loads" and logs the user back in. This is not desirable since it takes a few seconds to load up certain data on the page that only a user who is logged in should be able to see.
But this is my main problem:
On mobile devices, the user gets logged out when navigating to a new page within the app but the user never gets logged back in. Same thing happens when I refresh the page. The user gets logged out and I have to click the login button again.
Can't I make Auth0 work more efficiently where the user is immediately logged in when switching pages or never logged out in the first place?
This is all of my relevant code:
This is where Auth0 is imported into the app in main.ts:
import { createAuth0 } from "#auth0/auth0-vue";
app.use(
createAuth0({
domain: 'SOME_DOMAIN.auth0.com',
client_id: 'SOME_ID',
audience: 'SOME_AUDIENCE',
redirect_uri: window.location.origin,
scope: 'openid'
})
)
And then in each of the components that need to check if a user is logged in, I have this code:
import { useAuth0 } from '#auth0/auth0-vue'
// only showing relevant code here
setup() {
const { user, isAuthenticated, getAccessTokenSilently } = useAuth0()
return {
user,
isAuthenticated,
getAccessTokenSilently
}
}
And this is pretty similar code here but this is in the header component (rendered on every single page in the app) and contains the login/logout buttons:
setup() {
const { user, isAuthenticated, getAccessTokenSilently, loginWithRedirect, logout } = useAuth0()
return {
user,
isAuthenticated,
getAccessTokenSilently,
login: () => {
loginWithRedirect();
},
logoutUser: () => {
logout({ returnTo: window.location.origin })
}
}
},
So what am I missing? I need Auth0 to be more persistent. Am I missing some code?
Edit: not sure if this is important but this is how I navigate from one page to another:
router.push({ path: `/place/${store.selectedListView?._id}` })

I'm dealing with a similar problem using auth0 with react running on localhost. When I log in using loginWithRedirect(), auth0 places cookies on my browser but they would be cleared when I refresh the browser.
One solution to this was to enable 3rd party cookies for the localhost domain by going to browser settings, privacy and security, cookies and other site data, in "Sites that can always use cookies", add "http://localhost" and enable third party cookies for this site. This would let me stay logged in after reloading/refreshing.
However, I'm pretty sure there is a way to make this work without 3rd party cookies. I'll post it if found.

OIDC client + Identity Server 4, setting max_age silent token reniew not working

I have an angular 10 application with OIDC JS client as open id connect. On browser or tab close I need to redirect the user back to the login page.
By setting max_age to the UserManager the functionality is working fine, however, silent token reniew is not working while using the application and it redirects to the login page. The token got expire.
const settings: any = await response.json();
settings.automaticSilentRenew = true;
settings.includeIdTokenInSilentRenew = true;
settings.accessTokenExpiringNotificationTime = 30; // default 60
settings.checkSessionInterval = 5000; // default 2000;
settings.silentRequestTimeout = 20000;// default: 10000
settings.monitorSession = true;
settings.loadUserInfo = true;
settings.filterProtocolClaims = true;
settings.max_age = 10;
settings.prompt="login"
this.userManager = new UserManager(settings);
public async completeSignIn(url: string): Promise<IAuthenticationResult> {
try {
await this.ensureUserManagerInitialized();
const user = await this.userManager.signinCallback(url);
this.userSubject.next(user);
return this.success(user && user.state);
} catch (error) {
console.log('There was an error signing in: ', error);
return this.error('There was an error signing in.');
}
}
While doing some search I found that prompt="login" should work, but not able to solve it. How can I achieve if the application is active the silent token reniew should work if they close the browser or tab prompt the login screen.

max_age=10 is saying "if the user interactively signed in more than 10 seconds ago then force interactive authentication". In short I don't think you want that as it effectively disables silent renewal and will cause the authorize endpoint to return error=login_required if prompt=none is specified (which it will be for silent renewal).
Using sessionStorage to store UserManager state should acheive what you want as this is tied to the browser window and will be automatically cleared up if the window/tab is closed or the browser closed.
This will not affect the user's session cookie on the IDP however so you'd still want to manually specify max_age=n or prompt=login when you are doing the interactive sign in (i.e. if no local client-side session currently exists). To do this you can pass additional params to signinRedirect rather than defining them at UserManager settings level:
await manager.signinRedirect({ prompt: "login" });
Additionally, since these params can be tampered with it's wise to also check the auth_time claim in your backend to ensure the user really did authenticate recently.

for this issue
On browser or tab close I need to redirect the user back to the login
page
you must switch from sessionStorage to localStorage,
new Oidc.UserManager({ userStore: new Oidc.WebStorageStateStore({ store: window.localStorage }) }).signinRedirectCallback().then(function () {
window.location.replace("./");});
please check this Page
For silent token refresh please check this Page

Setting only prompt and removing the max_age also solve the issue for me
settings.prompt="login"

Using keycloak in Vue3, but not on startup

I have a problem with keycloak.js in my Vue3 application
const keycloak = Keycloak(keycloakOptions)
keycloak.init({
onLoad: 'login-required',
checkLoginIframe: false
}).then(async (auth) => {
if (!auth) {
window.location.reload()
} else {
const app = createApp(App)
app.provide(process.env.VUE_APP_KEYCLOAK_PROVIDE_VARIABLE, keycloak)
app.use(store)
await store.dispatch('keycloakStore/fillRoles', keycloak.realmAccess.roles)
app.use(router)
app.mount('#app')
}
}).catch((e) => {
console.log('Serwer lezy: ' + e)
})
I have the above code in my main.js file. This runs the keycloak subpage with login/register. If someone succesfully logs in, my Vue app starts. Now, instead of the above, I’d like to make it so the Vue app starts regardless of the person being logged in and the keycloak screen is ONLY launched if someone clicks a specified button in the UI. I’ve searched examples on the net, but i can only find ones that run keycloak on application start. Can someone help?

Turn onLoad value from 'login-required' to 'check-sso'. This option will only verify if the user is logged in without redirecting the user to login, and setup authentication properties acordingly.
Then you can call keycloak.login(), for example in your code. Together with route guards if necessary.
Also, put the creation of the app out of the else block, because it will not load if the user is not logged in when you have 'check-sso'.

Facebook JavaScript SDK: FB.init and FB.getLoginStatus always return the status 'unknown' and reset status in session

Circumstance:
I am trying all of this in development mode under http://localhost ...,
I allow all cookies on my Chrome, I haven't implemented FB.logout in the code, for every experiments I did below, I manually clean all of the sessions, and cookies before the next experiment. I am using a temporary user provided by the developer platform.
Problem:.
First, my settings with FB.init:
FB.init({
appId : 'my-app-id',
xfbml : true,
version: 'v8.0',
status : true,
});
With these settings, I can see the Facebook user status in my Session Storage
authResponse: null
expiresAt: 1603788619414
status: "unknown"
Then by using FB.login, I can get a response with user in connected status.
FB.login((response) => {
console.log(response)
// {
// authResponse: {
// accessToken: "..."
// data_access_expiration_time: 1611478982
// expiresIn: 7018
//. graphDomain: "facebook"
// signedRequest: "..."
// },
//. status: "connected",
//. }
})
The status in my Session Storage also reflects this result.
But then I refresh the page, the status in the session is set to unknown again.
Under this situation, I open a new tab to a Facebook page, my test user is logged in, if I trigger the FB.login on my site again, I don't have to go through the dialog to offer my email/password again, but the status in session would be set to 'connected'.
So seems every time I refresh my site, the FB.init sets the status to unknown even the user is actually logged in.
I do another experiment with FB.getLoginStatus:
FB.login((response) => {
FB.getLoginStatus((response) => {
// ...
});
});
FB.login((response) => {
FB.getLoginStatus((response) => {
// ...
}, true);
});
First case:
The response in the callback of FB.getLoginStatus has the result with status: connected.
Second case:
I get the response with status: connected in FB.login's response, but with roundtrip to Facebook server is forced for FB.getLoginStatus, the response of it turns to status: unknown, also the session is set to status: unknown.
Thanks for the help!

The problems are resolved after I setup https on my local development.
(I really wish this could be documented in the Facebook for Developers)
I am developing my project with React + Webpack, for people who are with the same stacks, here is a good reference you may need:
Webpack Dev Server running on HTTPS/Web Sockets Secure

Firebase for web: telling whether user is logged in or not

I have a web app built on Firebase's web library. I want to restrict some pages to only users who are logged in.
This code triggers when firebase detects the user is logged in, which is good.
firebase.auth().onAuthStateChanged(function (user) {
console.log('User is logged in');
});
But I can't get anything to reliably check whether the user is not logged in without leaving the page before the above code has a chance to check...
var check_firebaseReady == false;
function local_initApp() {
if (check_firebaseReady == false) {
if (typeof firebase !== 'undefined') {
check_firebaseReady = true;
console.log(firebase.auth().currentUser); //not reliable becuase it may return an empty user before it has a chance to get an existing user
}
setTimeout(function () {
local_initApp();
}, 300);
}
}
local_initApp();

I think for single page apps, you have to use the onAuthStateChanged listener and enforce access via security rules on specific data. If you want to block access to a complete page, you are better off using a cookie system. Firebase Auth provides that option: https://firebase.google.com/docs/auth/admin/manage-cookies
With cookies, you would check and verify the cookie server side, otherwise, not serve the page and show some error or redirect to login page instead.