Is it possible to create an embedded login mask?

[adrian-moisa]

I've been reading a lot lately trying to figure out how could I implement a custom login page with a pkce authorisation code flow. Wherever I read I keep seeing that the authorisation code flow is supposed to work only with redirect. Also ROPC and implicit flow are completely forbidden for modern SPAs. Therefore I ask myself, how are most of the apps that I visit able to display a login page as part of the main domain? For example facebook.com on icognito shows a login page on the main domain.

[ThexXTURBOXx]

That's a good question and probably a lot to unpack (and I also do not know of every good practice in this regard), so I try to keep myself as short as possible.

IIRC, in the case of Facebook, its frontend is written in PHP. So, the server is able to just render what it wants the user to see as the front page.
Internally, this could just boil down to something as simple as

if (isAuthenticated())
    show home page
else
    show login page

And actually, there is a route facebook.com/login/ which will just show you the login page, which suggests that both have a similar codeflow.

Since flutter_web_auth_2 is a Flutter package, it is a bit difficult to achieve the same in a secure way here: You don't have a server that only shows the user what it wants the user to see.
In this case, the application is entirely on the frontend side and there is noone stopping the user from seeing something it wants to see (but you don't want them to).

I think this is one of the main issues and the reason why Facebook can do this so easily and us (Flutter devs) cannot.
But anyone feel free to extend on this - this is just my take on this rather difficult issue.

[adrian-moisa]

Oh wow, that was a quick answer! "the server is able to just render what it wants" I think this is the answer for the facebook case. Didn't think it this way. Which also leads me to realise that I could do something similar in the future. Though I'm also aware that many apps in my laptop work with a regular login screen + many on the phone. I'm puzzled how they manage to do it seamlessly. Hope we get more answers on this thread

• quick question, does flutter_web_auth_2 provide "custom tab" on Android and a "SafariViewController" on iOS?

[adrian-moisa]

That's great news! Really happy to hear that custom tabs are used. I remember after quickly reading the source code that there's also support for refresh tokens, which is great. I'm considering migrating from openid_client to flutter_web_auth_2. They use implicit flow on the web version (not sure why since it is not recommended anymore). Therefore I had to write my own Web Authenticator to support PKCE authorisation flow. Which means I no longer have support silent token refresh, I have to write it again in my custom authenticator. Facing this issue I started looking around for other options. And saw your repo. Saw that it has PKCE for web + token refresh. Now I learn it has custom tabs. Sounds better and better.

One final question: If I wait for a full flutter app load then I get redirected to Keycloak login and then back again on web that means two loads of the app everytime. Is there a way to check in index.html that the access token is stored in a cookie. If not then I know to do an instant redirect to KC login rather than waiting for a full flutter load. What would you recommend? I have 60K loc for FE and it already loads a bit slow. So doing a double load is quite crushing the inital load time.

Regarding go, yes, I'm using it for my own app, already 20K loc in go so I'm quite familiar with it. I'm planning to use it for SSR for a simplified version of the site when users are not logged in as a stop gap measure to be able to rank on google. If I handle such rendering in go I might as well render the login mask in a seamless way.

PS I now see the mention about custom tabs in README. My bad, I've been going trough so many pages, forgot about this mention.

[ThexXTURBOXx]

At least on Web, yes, since #88 it is possible to have a silent authentication process using a hidden iframe, which can be used to refresh tokens!
I think I had seen openid_client at some point, but I didn't remember exactly the differences to it anymore.
At least, I have taken another quick look at its example usage: Indeed, a lot more boilerplate code is needed to get that to work (compared to a just a single function call in flutter_web_auth_2, together with the initial setup, which can be found in the readme).
Glad that you like what is currently supported by this package! At any rate, if you find something that needs a bugfix or something that you need is missing, feel free to create an issue or even a PR!

Actually (only on Web), you don't really get redirected to the App after successful authentication: Another tab is opened, in which the user authenticates itself to the given service.
After logging in (or doing whatever is needed there), the service should somehow redirect the user to a web page within your Flutter app that has some specific code on there (like this).
This code chooses one out of three approaches to send the redirect URL back to the Flutter app (two use postMessage and the last one uses the local storage for a very short time).
After that, the tab tries to close itself - but please note that this is does not always work because of "security reasons" (at least I have seen issues like #83 and #106 in which this was apparently a problem).

In that case, Go might be a good way probably. Good luck with that!

Also, don't worry, the readme is kinda long and convoluted anyway!

[adrian-moisa]

One notable difference is that their repo seems rather quiet. I fully appreciate the time you took to answer the questions. I hope I can contribute with bug reports at least if not with new code. I'll start tomorrow my first implementation. Hopefully I can nail all of it in one shot.

[ThexXTURBOXx]

Sorry for replying so late now - I was sleeping!
Yes, their last update was 7 months ago, but apparently not many new bugs were found in the mean time.
Feel free - every contribution is well appreciated! And of course, good luck with the migration :)

[adrian-moisa]

Got it working both on the web and on android. Took me a bit of time to figure out what is the deal with callbackUrlScheme . I wasn't familiar how it works on android. Previous lib was using a hidden server to capture the callback so the same settings could be shared between web and native. Otherwise it's looking good. I'm quite confident the app works as desired. I like that I got a lot less code in the FE to get everything working compared to my prev implementation (well, this is my 3rd setup, so yeah, also experience). The frontpage docs could be improved a bit. Maybe I'll do a PR once I find a breather. Now I'm in crunch mode. Otherwise great work on the lib.