I'm using Custom Token Authentication for my firebase app.
I will need to fetch the token from my server wherein the user needs to login first. I'm thinking of utilizing a popup.
But how do I pass to the opener (parent window) the retrieved token by the popup?
Firebase authentication uses pop-ups or redirects for OAuth authentication because a user's browser needs to be sent to the third-party OAuth provider (Google, Facebook, Twitter, etc.) in order to authenticate.
If you have your own authentication system, the simplest and easiest thing to do would be to use form input on a page, communicate with the server via XHR, and then update your UI to reflect that the user is now authenticated.
That said, if you're set on using a a new browser window / pop-up for authentication, check out Mozilla's open-source library github.com/mozilla/winchan which makes communicating between host pages and pop-ups fairly easy.
You may create a popup window for custom Firebase authentication as described in this example for Spotify OAuth: https://github.com/firebase/functions-samples/blob/master/spotify-auth/public/popup.html
Also you may use in the main application window firebase.auth().onAuthStateChanged() to listen to the Firebase user change event like in the example: https://github.com/firebase/functions-samples/blob/86f9e135af344b2e9268c055a9a1bcb00a7e7c0d/spotify-auth/public/main.js#L36
How does it work? Excerpt from the readme:
The ./popup.html receives the Custom Auth Token and other data back
from the AJAX request to the token Function and uses it to update the
user's profile, saves the access token to the database, authenticate
the user in Firebase and then close the popup. At this point the main
page will detect the sign-in through the Firebase Auth State observer
and display the signed-In user information.
Related
We are using Azure B2C for login/authentication of our users. This works fine on our website (social and email login etc).
Our mobile app is built in Xamarin forms and we are trying to build a native login experience (using native app controls vs. a web view within the app that B2C presents) that integrates natively with the device biometrics for login (FaceId, TouchId, fingerprint login).
As you can imagine, doing this in the webview that Azure B2C requires doesn't allow a native login experience.
The overall goal here is 2 fold:
Build a native login experience
Integrate with biometrics.
Question:
Does Azure B2C have an API that enables this, especially so we can use authorization code flow without a UI. ROPC exists but does it integrate with social accounts too?
If not, is there a way to integrate biometric login with Azure B2C on mobile when the login screen is presented in a webview? So that when the B2C login page in the webview is presented, a user can login with touch/faceId and save that information to they keychain (on iOS and the equivalent on Android)
You need to use Webviews, and you can enable Biometric integration with webview type experience.
You cannot integrate any service with Social Accounts and ROPC. Any integration with Social IdPs will need a webview.
Yes, enable Keep Me Signed In for long lived sessions. Wrap the biometric code around the acquireTokenSilent() methods.
Then you have two options:
You can hide the KMSI button, and use JavaScript to force select the KMSI checkbox in the login page using page customisation.
You can rename the KMSI label on the login page to ask the user if they want to enrol in to biometric. Then after the login, your app will receive a claim in the token whether the user opted in, use claim resolver to achieve that.
Now you have a user logged into the App, with:
1 hour access token
Potentially up to infinity long refresh token
Multi day/year Azure AD B2C session cookie
Then, when the user re-attempts to open the app, or perform some action in the app, you will need to call acquireTokenSilent(). This MSAL method obtains a fresh access token for the required API resource/scope.
If the token is expired, or requires a different scope, the a new token is fetched.
You can wrap any action in your application with the biometric SDK.
if (performingSomeAction && requiresBiometric)
if (challengeBiometric succeeds)
acquireTokenSilent()
//do someAction
Now if the refresh token has expired, then the web view will pop up, the long lived session cookie will be used to get new tokens. The acquireTokenSilent() method handles all of that already.
Is it possible to use a custom authentication provider which I don't have any control over?
I develop an app in addition to a teachable course. Teachable is a platform like shopify where you can create online courses.
I want to use it as an auth provider, so a user, that already has an account can login with his teachable account.
To my knowledge custom authentications with auth tokes work like this: I send a request to my server with the entered user credentials. From my server I use these credential to login to teachable, if that was successful my server gets a callback and I return a token to my client, so the login was successful.
However as far as I know teachable doesn't have an api option for me to login and get a callback if it was successful.
What can I do about this? Also are there any security issues I didn't realized?
Your understanding of the flow to add a custom provider to Firebase Authentication is correct. You need to be able get the authenticated token from the provider, and mint a Firebase custom token from it.
If the provider you're looking to add doesn't have an API, you won't be able to add it as a custom provider to Firebase though.
I don't immediately see another way to connect the provider without an API.
Is it possible to use the AUTH access token we got back from MSAL on a mobile app to open an office365 page in the browser, like mail or calendar, etc. without having to re-auth the user?
I can send the token in the header, but can't find any requirements specs out there.
This is not possible today: the token you get from AAD is for your app - not for Office. In addition, users may be logged on the browser for example with a user that is different than the user signed-in to your application.
For firebase, I'm using custom authentication because our organization uses CAS for single sign on.
Does custom authentication handle refresh jwt tokens automatically or would I need to develop a refresh workflow within my app?
I am not creating custom tokens using a third party library. My token is created via var token = firebase.auth().createCustomToken(uid, additionalClaims) as described on https://firebase.google.com/docs/auth/server/create-custom-tokens. But this page doesn't mention anything about refresh tokens.
My clients are mainly web, and I've found notes that if you use the Android SDK, this refresh happens automatically. But I'm unsure about refresh tokens and web clients for custom authentications.
After you create the custom token using createCustomToken, you pass that token to the web client and call firebase.auth().signInWithCustomToken(token). The promise returned will resolve with a firebase User. The onAuthStateChanged listener will trigger as expected. A firebase Id token will be available. The token will be refreshed every hour and will be handled by the Firebase SDK. Anytime you call a user method or getToken on user, the token will be automatically refreshed if the old one was expired.
I have been using firebase chat and firepad for real time functionality in My Web Application which has multiple pages like a forum.
I started using the Firebase SimpleLogin too.I am able to login as a user and get the auth object which has the uid,id etc info.
1)Now if the user traverses to another page(i.e a new url(same application) is loaded ),does the authentication persist ? Ofcourse as we are manually doing the authentication by calling ref.login(),how can we know if the user is logged in when the second page is loaded.Will firebase store any cookie in user's browser or local storage ?
2)If the user is authenticated through firebase and now for for any request to my backend server for a new page ,how will I know that the user is authenticated.Should I be manually handling this by inserting some cookie in the browser or a hidden form field once firebase login happens ?
3)Is firebase Authentication suitable for multi page web application where the html pages and content are served from a back server other than firebase.?
I have checked the below question too.
Firebase JWT Authentication, Continually Send Token?
As long as browser cookies and local storage are both local storage is available on the browser, Firebase Simple Login sessions will be persisted across page refreshes on the same domain. Simply reinstantiate the Firebase Simple Login client via new FirebaseSimpleLogin(ref, function(error, user) { ... }) to restore a persisted session, if one is available.
Using this approach, your callback will automatically be invoked with the login state of the user. Note that you do not need to call .login(...) again to pick up a session, as calling .login(...) will always try to create a new session.
Once the user is authenticated, you can begin writing Firebase Security Rules, making use of the auth variable, which is non-null for any authenticated user, and will contain useful user information (such as user ids) when using Firebase Simple Login. See the 'After Authenticating' section of any Simple Login auth. provider page to see the exact payload.
In the event that you already have an authentication system you'd like to integrate with Firebase, or Simple Login is not sufficient for your needs, you can always generate Custom Tokens with your own custom data. These tokens can contain any arbitrary JSON payload of your choosing, which will be available in your Firebase security rules under the auth variable.
See the Firebase Security Quickstart for more information.