MAUI WebView Blazor Website Authentication Persistence

[tpitman]

I have a Blazor server based website. There is an authentication piece to it that uses OAuth. It works great when I browse to is using any desktop browser. I can log in using my google account or create a username and password and either way once I log in I can close the browser and come back later and I am still logged in.

I am also writing a MAUI mobile app for ios / android / maccatalyst. I have embedded a WebView into a page and browse to this same website.

I can log in and the authentication work, but the next time I run the app I am not logged in anymore.

How can I persist the login in my WebView in this MAUI mobile app?

I used AI to try a lot of things having to do with persisting the cookies and such and none of it is working. This seems like a pretty normal thing to want to do and I am surprised there isn't just a flag I can turn on or that it doesn't already persist the authentication of a website. What am I missing here?

[jaimeatsherpa]

How can I persist the login in my WebView in this MAUI mobile app?
By that do you mean persist the logged user in the app? Or in specifically in the WebView?
If it's the first, why not save something (tokens for example) in the Secure Storage?

Don't know exactly what are you trying to do but if you are using OAuth flow, wouldn't be better to use WebAuthenticator?

[powerteqtpitman]

Thank you for your response. Not sure what WebAuthenticator is.

What I am trying to do is not duplicate the login screens of the web site. I am just showing the website login page in a WebView in my app.

That works fine to show it and logging in works.

the issue is that the credentials are not saved from one session to another.

you know how when you are in a normal browser and you log in to a site you can close the browser and come back later and you are still logged in? That is what I want in my app in the WebView that I am showing in my app.

[jaimeatsherpa]

WebAuthenticator is the way to do browser based auth flows Web authenticator. I assume that for your Blazor Server app you are storing somewhere the access/refresh token cookies, local storage anywhere. You can do the same with MAUI Secure Storage, that what you can check if the access token is still valid or the user should login again.

The WebView it's not the way to go in this case, you will need to handle some other stuff like access token parsing and other stuff and it's not as secure as WebAuthenticator. Just go with WebAuthenticator (I'm using Duende OIDC client for that matter, it's open source)

[powerteqtpitman]

I just want to clarify a couple things:

The blazor website is one project. I do not know exactly what it is doing. I just know it allows oauth via username and password or things like sign in with Google.

the mobile app is a separate project. It is Maui c# and not blazor hybrid or anything like that.

does the WebAuthenticator allow me to embed the web pages from my blazor website into a page in my e app?

[jaimeatsherpa]

So first I would say is that you need to know that the webapp is doing (at least in general) just so you can implement something that works well in both cases. I don't know exactly what you are trying to do, if you are trying to persist the session in the app, so when the user closes the app and comes back he doesn't need to login again or if you want SSO, meaning the user can login in the blazor app and automatically in the app. Pretty similar approach but not exactly the same thing to achieve.

does the WebAuthenticator allow me to embed the web pages from my blazor website into a page in my e app?

Not in the same way that the WebView does, it will open the mobile browser, which is more secure and it's designed for this exact purpose. If you wan't to show some web page the use the WebView if you wanna do a browser authentication flow then use the WebAuthenticator.

General Process

So as you said that you are using a WebView to login, I assume that the login page is served the same way is served to the blazor app. For example, on most of my projects I use Keycloak that serves this login page:

Before navigating to that page I need to specify some settings like:

• the post login redirection uri
• the authority
• etc...

After login, Keycloak redirects to my (webapp or MAUI app) and I can parse the response to get the access and refresh tokens, that I can save either in LocalStorage in the WebApp or in MAUI in SecureStorage. Then I can check if a new login is needed or the access token is still valid.

Your problem

Is a pretty common approach, so I don't think that is the problem your are having. The thing is how the WebView works with a MAUI app, it's an embedeed browser indeed but I think it doesn't allow you to parse those tokens etc, meaning you cannot save them to your storage. If you cannot save them to your storage that means that the user needs to login again.

That's why I'm recommending the WebAuthenticator, as it's gonna be easier for you to parse those tokens. Here a couple resources you can check.

Check the Duende sample repository MauiAuthenticationBrowser and also Duende IdentityModel OIDC Client

Those examples will probably give you some ideas. The core idea I've already explain but it depends a little bit what's you OAuth server.