I’m trying to create a flutter web app that accesses Google Cloud Platform. This is a client side application. I’d like the user to not have to go through a sign in flow each time they open the application or refresh the page. What is the correct approach on the web?
In desktop applications, I use the OAuth AuthFlow to obtain a refresh credential which I store in the home directory.
In a web application should I also obtain an refresh token and store that using flutter secure storage?
I tried following the Google APIs Flutter Example. This works but every time I refresh the page I have to call _googleSignIn.signIn() in order to obtain a credential; invoking _googleSignIn.signInSilently() doesn’t appear to be sufficient. I see a pop-up indicating automatic sign in but the user account still ends up being null and I have to explicitly call signIn(). Is this working as expected or does it indicate some other bug in my application?
Is the GoogleSignIn flow using the implicit flow? I looked at the code but couldn’t really find where the OAuth flow was happening. GoogleSignIn indicates there is no refresh token which suggests to me the implicit flow.
2
Answers
The OAuth documentation seems pretty clear that the OAuth2 authorization code flow with PKCE is the recommended approach for web apps. Auth0 docs and Microsoft migration guide documentation support this.
Based on this I don't think GoogleSignIn is the right package to use as I believe its using the implicit flow.
Here's a working example using the oauth2_client package. This package automatically stores the credentials in local storage. In order to obtain a refresh token you need to request offline access as indicated here.
Using flutter web is kinda tricky, you need to have clear that anytime you refresh the webpage the app will rebuild completely so you need to save that token/auth state on local storage or secure storage.