I'm building a Vue PWA with Firebase authentication. The web app will listens Firebase's onAuthStateChanged event on App first loaded to automatically sign the user in and save his ID token for API requests latter, by invoke Firebase's getIdToken(/* forceRefresh */ true).
Beside that, I also utilize Page Visibility API to reload the Web App after 5 minutes hidden (to get new Firebase ID token if the old one has expired).
On my Android phone, I visit my web app URL on Chrome, then add icon to home screen and make all test cases by access the web app thru that icon.
Here is the test case: after sign in and using the web app normally, I click Home button to hide the web app, then after ~10 minutes, I recall the app from background state, the web app was auto-reload successfully then I could continue using it as normal. The problem is, if I recall the app from background after a long time (~6 hours), the web app do not auto-reload then I don't have new Firebase ID Token of the user, as a result I get Token Expired error when making API request to get user profile...
I need to findout a reliable way to trigger autoLogin() function, so users don't need to re-login every time when they come back using my WebApp.
Here are skeleton code base:
main.js
const unsubscribe = fibAuth.onAuthStateChanged((user) => {
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App },
created () {
// Firebase auto login
if (user) {
store.dispatch('autoLogin', user)
}
// Reload after a duration
document.addEventListener('visibilitychange', function () {
store.dispatch('appVisibilityHandler', document.visibilityState)
})
} // end created()
}) // end Vue()
unsubscribe()
})
Vue Store - index.js
async autoLogin ({commit, state, dispatch}, userPayload) {
commit('SET_APP_LOADING', true)
try {
let idToken = await userPayload.getIdToken(/* forceRefresh */ true)
console.warn('store::autoLogin() - idToken:', idToken)
let apiResponse = await UsersRepos.getMyProfile(idToken)
// ... processing apiResponse ...
} catch (error) {
console.error('store::autoLogin() - error:', error)
}
commit('SET_APP_LOADING', false)
},
appVisibilityHandler (context, statePayload) {
try {
const APP_REFRESH_SECONDS_THRESHOLD = 300 // 5 minutes
if (statePayload === 'hidden') {
localStorage.setItem('app-hidden-ts', (new Date()).getTime())
} else if (statePayload === 'visible') {
let lastSec = parseInt(localStorage.getItem('app-hidden-ts') / 1000)
let nowSec = parseInt((new Date()).getTime() / 1000)
localStorage.setItem('app-hidden-ts', nowSec * 1000)
console.warn('total hidden seconds:', (nowSec - lastSec))
if (nowSec - lastSec > APP_REFRESH_SECONDS_THRESHOLD) {
context.commit('SET_APP_LOADING', true)
// refresh the whole web page
router.go()
}
}
} catch (error) {
alert('appVisibilityHandler error:' + error.message)
}
}
I really appreciate any guide or clue to overcome the issue. Thank you in advance!
Firebase Authentication uses ID tokens that are valid for an hour. Calls to getIdToken() return this token. The SDK automatically refreshes the ID token in the background, but of course can't recall your autoLogin since the authentication state didn't change.
You'll want to attach an onIdTokenChanged handler to detect when the ID token has changed and pick it up.
firebase.auth().onIdTokenChanged(function(user) {
if (user) {
// User is signed in or token was refreshed.
store.dispatch('autoLogin', user)
}
});
In fact, this might replace your onAuthStateChanged handler, since this also fires when the user signs in.
Related
After two months of experimenting with Teams Authentication via adal.js and msal.js and failure, I’m close to giving up. So I really need your help.
Basically I need to “silently” authenticate the logged in Teams User for my own website (tab) inside my app that I created with App Studio. The reason for that is, so that I can use the data of the authentication token for the login of my own website.
So far I was only able to get this working with msal.js and a popup, which according to Teams developer I’ve asked is not the way to go. Understandable, since I cannot use the popup method on the Teams Client because it gets blocked.
I’ve tried this silent login method (https://github.com/OfficeDev/microsoft-teams-sample-complete-node/blob/master/src/views/tab-auth/silent.hbs) that was recommend to me.
Sadly it didn’t work. All I get is a “Renewal failed: Token renewal operation failed due to timeout” error.
Since the msal.js popup variant (Node.js Azure Quick Start Example) I used before worked in a web browser, I don’t think that the configuration of Azure App is wrong.
This is my code so far:
// onLoad="prepareForm()"
<!--- Import package for authentication information in Teams/Azure--->
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.15/js/adal.min.js" integrity="sha384-lIk8T3uMxKqXQVVfFbiw0K/Nq+kt1P3NtGt/pNexiDby2rKU6xnDY8p16gIwKqgI" crossorigin="anonymous"></script>
<script src="https://statics.teams.microsoft.com/sdk/v1.4.2/js/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
<script language="JavaScript">
let config = {
clientId: "1402f497-d6e8-6740-9412-e12def41c451", // I've changed it for this stackoverflow post
redirectUri: "https://myredirect.com", // I've changed it for this stackoverflow post
cacheLocation: "localStorage",
navigateToLoginRequestUrl: false,
};
microsoftTeams.initialize()
/// START Functions for Teams
function getTeamsContext() {
microsoftTeams.getContext(function(context) {
startAuthentication(context);
});
}
function startAuthentication(teamsContext) {
if (teamsContext.loginHint) {
config.extraQueryParameters = "scope=openid+profile&login_hint=" + encodeURIComponent(teamsContext.loginHint);
} else {
config.extraQueryParameters = "scope=openid+profile";
}
let authContext = new AuthenticationContext(config);
user = authContext.getCachedUser();
if (user) {
if (user.profile.oid !== teamsContext.userObjectId) {
authContext.clearCache();
}
}
let token = authContext.getCachedToken(config.clientId);
if (token) {
console.log(token)
// Get content of token
} else {
// No token, or token is expired
authContext._renewIdToken(function (err, idToken) {
if (err) {
console.log("Renewal failed: " + err);
// Some way of logging in via Popup or similiar
} else {
console.log(idToken)
// Get content of token
}
});
}
}
/// END Functions for Teams
// initialized on page load!
function prepareForm() {
getTeamsContext();
document.InputForm.password.focus()
}
<script/>
Those are my questions:
What causes this error?
How do I authenticate the token on manipulation and is it Teams or Azure? (Does adal.js any functions for this?)
How do I login if the silent authentication fails and popups are blocked? Is there a website for authentication provided by Teams that returns a token?
Are there any working examples of the silent authentication that are not from the official Microsoft website? (I don't understand them.)
I've recently made simple SPA application which connects to firebase using Google provider and loads data for authenticated user.
Everything was great, until I tried to sign-out user using following method from documentation:
firebase.auth().signOut()
Logout was succesful, but after this, I can't sign-in again, because I'm receiving following error:
updateCurrentUser failed: First argument "user" must be an instance of Firebase User or null.
When I checked network tab in my browser, I've seen my user data in responses, so there Was an issue propably with the firebasewebui.
Things which I also tried
Sign-in in another browser - working
Sign-in in incognito mode - not working
Sign-in from other domain (for instance fake domain authorized in firebase console) - working
Wiped my entire Google Chrome profile from computer and add it again - not working
Sign-in from Android application - working (here there is no issue with sign-out and sign-in)
So it looks like it is something connected with domain and browser combination.
Here is my js code:
const firebase = require('firebase/app');
require('firebase/auth');
require('firebaseui');
const initializeFirebase = () => {
const config = { /* config */ };
firebase.initializeApp(config);
firebase.auth().onAuthStateChanged(function (user) {
if (user) {
// loads data
} else {
// visibility staff
initializeFirebaseAuthForm();
}
});
}
const initializeFirebaseAuthForm = () => {
const uiConfig = {
callbacks: {
signInSuccessWithAuthResult: function (authResult, redirectUrl) {
return false;
},
uiShown: function () {
visibilityManager(false);
}
},
signInFlow: 'popup',
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID
]
};
let ui = null;
if (firebaseui.auth.AuthUI.getInstance()) {
ui = firebaseui.auth.AuthUI.getInstance();
} else {
ui = new firebaseui.auth.AuthUI(firebase.auth());
}
ui.start('#firebaseui-auth-container', uiConfig);
}
document.addEventListener('DOMContentLoaded', function () {
initializeFirebase();
});
In such case, my observer registered in onAuthStateChanged is not fired.
I've found answer by myself.
There was couple of issues. First of all, Firebase initialization should be placed as 'global' like for example here: https://github.com/firebase/firebaseui-web/, especially this lines:
firebase.initializeApp(config);
ui = new firebaseui.auth.AuthUI(firebase.auth());
Secondly, with my code from input, I've to get existing instance of ui using conditional. In firebase github, ui was created always using new operator and it was always created once per script run.
I found out, that there is workaround - ui instance can be deleted using delete() promise.
I've been searching for a few hours on how to get my custom push notification working. Here is how I've set up my project: no front-end framework, a Node.js/Express.js back-end, Firebase Cloud Messaging (FCM) as push manager and a custom service worker. I am currently hosting the app on localhost and I have HTTPS set up and a manifest.json that contains the minimum amount of fields to get started. The manifest.json contains a start_url field that points to /index.html, the landing page for the app. The app is bundled with webpack v. 4.
Back-end
On the back-end, I have set up the Firebase Admin SDK in a specific router and I send a custom notification object a bit like the following to the FCM server:
let fcMessage = {
data : {
title : 'Foo',
tag : 'url to view that opens bar.html'
}
};
When an interesting event occurs on the back-end, it retrieves a list of users that contains the FCM registration tokens and sends the notification to the FCM servers. This part works great.
Front-end
I have two service workers on the front-end. Inside my front-end index.js, I register a custom service worker named sw.js in the domain root and tell firebase to use that service worker like so:
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./sw.js')
.then(registration => {
messaging.useServiceWorker(registration);
})
.catch(err => console.error(`OOps! ${err}`));
}
FCM and its credentials are set up and the user can subscribe to push notifications. I won't show that code here since it works and I don't believe it is the issue.
Now on to the service workers themselves. I have a firebase-messaging-sw.js file at the root of my domain. It contains the following code:
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js');
firebase.initializeApp(configuration);
const messaging = firebase.messaging();
Configuration is just a placeholder for all of the creds. Again that stuff works.
What I want to do is to NOT use the FCM push notification and instead create my own push notification that contains a url to a view that the user can click on and go to that view. The following code almost works and is a hack I found on another site:
class CustomPushEvent extends Event {
constructor(data) {
super('push');
Object.assign(this, data);
this.custom = true;
}
}
self.addEventListener('push', (e) => {
console.log('[Service Worker] heard a push ', e);
// Skip if event is our own custom event
if (e.custom) return;
// Keep old event data to override
let oldData = e.data;
// Create a new event to dispatch
let newEvent = new CustomPushEvent({
data: {
json() {
let newData = oldData.json();
newData._notification = newData.notification;
delete newData.notification;
return newData;
},
},
waitUntil: e.waitUntil.bind(e),
})
// Stop event propagation
e.stopImmediatePropagation();
// Dispatch the new wrapped event
dispatchEvent(newEvent);
});
messaging.setBackgroundMessageHandler(function(payload) {
if (payload.hasOwnProperty('_notification')) {
return self.registration.showNotification(payload.data.title,
{
body : payload.data.text,
actions : [
{
action : `${payload.data.tag}`,
title : 'Go to link'
}
]
});
} else {
return;
}
});
self.addEventListener('notificationclick', function(e) {
console.log('CLICK');
e.notification.close();
e.waitUntil(clients.matchAll({ type : 'window' })
.then(function(clientList) {
console.log('client List ', clientList);
const cLng = clientList.length;
if (clientList.length > 0) {
for (let i = 0; i < cLng; i++) {
const client = clientList[i];
if (client.url === '/' && 'focus' in client) {
return client.focus();
}
}
} else {
console.log('no clients ', e.action);
clients.openWindow(e.action)
.then(client => {
console.log('client ', client);
return client.navigate(e.action);
})
.catch(err => console.error(`[Service Worker] cannot open client : ${err} `));
}
}))
});
The hack is meant to capture a push event and the FCM default notification payload and instead serve that payload through a custom one made via the Notification API.
The code above works great but ONLY if I put it in the firebase-messaging-sw.js file. That's not what I really want to do: I want to put it in the sw.js file instead but when I do, the sw.js cannot hear any push events and instead I get the default FCM push notification. I've also tried importing the entire firebase-messaging-sw scripts into the custom service worker and it still won't hear the message events.
Why do I want to use it in my service worker instead of the Firebase one? It's to be able to open the app on the view passed into the 'tag' field on the notification's body. If I use the Firebase service worker, it tells me that it's not the active registered service worker and though the app does open in a new window, it only opens on /index.html.
Some minor observations I've made: the clients array is always empty when the last bit of code is added to the firebase-messaging-sw.js file. The custom service worker is installed properly because it handles the app shell cache and listens to all of the other events normally. The firebase-messaging-sw service worker is also installed properly.
After much pain and aggravation, I figured out what the problem was. It was a combination of the architecture of the app (that is, a traditional Multi-Page App) and a badly-formed url in the custom service worker, sw.js as so:
sw.js
self.addEventListener('fetch', e => {
// in this app, if a fetch event url calls the back-end, it contains api and we
// treat it differently from the app shell
if (!e.request.url.includes('api')) {
switch(e.request.url) {
case `${endpoint}/bar`: // <-- this is the problem right here
matcher(e, '/views/bar.html');
break;
case `${endpoint}/bar.js`:
matcher(e, '/scripts/bar.js');
break;
case `${endpoint}/index.js`:
matcher(e, '/index.js');
break;
case `${endpoint}/manifest.json`:
matcher(e, '/manifest.json');
break;
case `${endpoint}/baz/`:
matcher(e, '/views/bar.html');
break;
case `${endpoint}/baz.js`:
matcher(e, '/scripts/bar.js');
break;
default:
console.log('default');
matcher(e, '/index.html');
}
}
});
Matcher is the function that matches the request url with the file on the server. If the file already exists in the cache, it returns what is in the cache but if it doesn't exist in the cache, it fetches the file from the server.
Every time the user clicks on the notification, it's supposed to take him/her to the 'bar' html view. In the switch it must be:
case `${endpoint}/bar/`:
and not
case `${endpoint}/bar`:
Even though the message-related code is still in the firebase-messaging-sw.js file, what happens is it creates a new WindowClient when the browser is in the background. That WindowClient is under the influence of sw.js, not firebase-messaging-sw.js. As a result, when the window is opened, sw.js intercepts the call and takes over from firebase-messaging-sw.js.
I'm building a small JS app for my Microsoft ToDo tasks and use the msal.js library to accommodate the authentication process.
This works perfectly fine, I get a popup, I authenticate my profile, the popup closes and my tasks appear on my screen.
But: It doesn't seem to remember that I authenticated before; Every time I run my webpack app and the page is booted it shows the popup and asks for authentication. Once I've authenticated and just refresh my page, it just shows me the tasks without showing the popup again. I haven't tried waiting for an hour but I think it has something to do with not properly refreshing my access token. I'm not that involved with the Outlook/Microsoft API that I can really figure out if I'm using it correctly.
In short: How can I authenticate once so that the next time I start my app the tasks are shown without having to authenticate again?
My init function
this.userAgentApplication = new Msal.UserAgentApplication(microsoftTasksClientId, null, function (errorDes, token, error, tokenType) {
// this callback is called after loginRedirect OR acquireTokenRedirect (not used for loginPopup/aquireTokenPopup)
console.log(token)
})
let user = this.userAgentApplication.getUser()
if (!user) {
const self = this
// this.userAgentApplication = new Msal.UserAgentApplication(microsoftTasksClientId)
this.userAgentApplication.loginPopup([`${this.apiRootUrl}Tasks.readwrite`]).then(function (token) {
self.idToken = token
user = self.userAgentApplication.getUser()
if (user) {
self.getSilentToken()
}
}, function (error) {
console.log(error)
})
} else {
this.getSilentToken()
}
And my getSilentToken function
const self = this
this.userAgentApplication.acquireTokenSilent([`${this.apiRootUrl}Tasks.readwrite`]).then(function (token) {
console.log('ATS promise resolved', token)
self.accessToken = token
self.getTasks()
}, function (err) {
console.log(err)
})
Please not that my code isn't refactored AT ALL! ;-)
What version of MSAL are you using?
There is a problem in 0.1.1 version that storage is 'sessionStorage' by default and can't be really changed. In that case your login is saved just for currently opened window and you will be forced to relogin even when opened new browser window.
You should use 'localStorage' to achieve what you want and pass it as a constructor parameter for UserAgentApplication.
Here is a fix in their repo for this:
https://github.com/AzureAD/microsoft-authentication-library-for-js/commit/eba99927ce6c6d24943db90dfebc62b948355f19
Whenever I render the home page or account page my session is sometimes lost. I have a function called isSignedIn() that checks if the uid exists. Sometimes, when I refresh the homepage, it returns false. When I hit my account endpoint it returns false too even though it's true on the previous page. Any ideas on why this is happening?
How my app works:
When a user logs in I take the uid from client side and hit an auth endpoint.
function createServerSession(user) {
// Get secret token from Firebase for current session
firebase.auth().currentUser.getToken(true)
.then(function(idToken) {
// Get session on my Node server for server user identification
if (idToken) {
fetch('/firebaseauth?idtoken=' + encodeURIComponent(idToken) + '&username=' + encodeURIComponent(user.email.split('#')[0]), {
credentials:'include'
}).then(function(data){
if (window.location.pathname === '/' && document.getElementById('login').innerHTML.trim() === 'Join') {
redirect('/');
}
if (window.location.href.includes('login')) {
redirect('/');
}
})
}
})
}
Then it hits my node.js code to store the session:
app.get('/firebaseauth', function (req, res) {
if (! req.session.idToken) {
firebase.auth().verifyIdToken(req.query.idtoken).then(function(decodedToken) {
req.session.username = req.query.username
req.session.idToken = decodedToken.uid;
req.session.save(function(){
res.json(true)
})
})
This approach works fine most of the time, but some instances it will send multiple requests. The highest amount being 7400 at one point. Any guidance is appreciated.
Since posting this issue, I've switched hosts from GAE to Heroku and that fixed it. I know the functionality with node.js is in beta so maybe that was it