Get Started with Flutter Authentication

Flutter is Google’s cross-platform UI toolkit created to help developers build expressive and beautiful mobile applications. Learn how to add user authentication to Flutter apps using OAuth 2.0 and OpenID Connect.

Read more

Brought for you by @amin

7 Likes

1 Like

First and foremost, huge kudos @amin for putting it together!

1 Like

Finally it’s here, Thanks @amin for the wonderful guide.

@robertino.calcaterra Thanks for sharing!

3 Likes

Looks great! Just 2 things i’ve noticed so far

  1. I was getting an infinite loading screen after pressing login (credentials are correct). This isn’t something that everyone will encounter but I had some capitals in the app ID which was screwing around with the redirect after successful login i think.

  2. A minor thing with the guide about editing the gradle file. I dont think there is a app gradle file on a fresh flutter create (from what I experienced anyway). Might be confusing for very newcomers.

2 Likes

Thanks for providing that feedback @ike1!

Howdy, Ike! Thank you for reading the blog post and for sharing your feedback :muscle:

Let me address them one by one, please:

(1) When you say “app ID”, what are you exactly referring to? Under what file is that app ID defined?

(2) Are you referring to this step?

If so, I just run flutter create --org com.auth0 flutterdemo to verify if the Flutter CLI is creating that file. It does:

Here’s my tooling information:

Flutter 1.17.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision f7a6a7906b (8 weeks ago) • 2020-05-12 18:39:00 -0700
Engine • revision 6bc433c6b6
Tools • Dart 2.8.2
1 Like

Hey Dan!

With reference to 1) I was talking about the same build.gradle file in 2). Apologies as I dont have alot of development experience with android so I had com.auth0.RandomName as the applicationId. I also just copied that into the ‘appAuthRedirectScheme’. After clicking the login button it just went into an infinite loading cycle. I changed the applicationId to com.example.randomname and it seemed to have been fixed. Not sure if coincedental or not.

With reference to 2) Actually I think that was me being stupid. I opened the new project with Android Studio and it was just very laggy in loading the files. I did it again and opening it up in visual studio works fine so ignore that one.

Overall, life saver guide without having to dig into other SDKs :heart_eyes: Are you able to share what might be shared next in terms of flutter documentation (if any).

Apologies as I dont have alot of development experience with android

No worries :slight_smile: I myself have been learning along the way recently.

I consulted the “Set the application ID” document from Android and it explains that:

"And although the application ID looks like a traditional Java package name, the naming rules for the application ID are a bit more restrictive:

It must have at least two segments (one or more dots).
Each segment must start with a letter.
All characters must be alphanumeric or an underscore [a-zA-Z0-9_]."

I think the infinite loop you were getting is related perhaps to a mismatch between the registered callback URL with Auth0 and the values in the app configuration. I’ll research more with Amin and other colleagues on what are the implications of changing the applicationId in relation to Auth0.

I opened the new project with Android Studio and it was just very laggy in loading the files.

:grimacing: Android Studio do be like that sometimes! I have started using Visual Studio Code more often because of that.

Are you able to share what might be shared next in terms of flutter documentation (if any).

What do you mean by this exactly? :thinking: Do you mean our future tutorials on Flutter?

Didn’t expect to see that it uses the AppAuth wrapper I maintain in there so thank you! Is it ok if I add a link to the blog post to the readme file?

By the way dexterx.dev is just my personal blog/site so I don’t have a team :sweat_smile:

2 Likes

Howdy, Michael! Welcome to the Auth0 Community. Thank you for your work in that package :slight_smile: By all means feel free to include a link to the blog post in your docs :pray: It would be an honor.

We can update the blog post to cite your name directly too:

flutter_appauth : A well-maintained wrapper package around AppAuth for Flutter developed by Michael Bui. AppAuth authenticates and authorizes users and supports the PKCE extension.

What do you think?

The honour is mine :slight_smile:

The suggested update looks good though currently the only plugin with mention of the maintainer’s name/company is my one. I imagine this is because it’s the main plugin that is involved but if possible, I’d suggest doing the same for other plugins as well :slight_smile:

1 Like

Regarding the appAuthRedirectScheme, I had heard from another member of the community that they did have issues if there were capital letters (see Issue with my redirection scheme · Issue #127 · MaikuB/flutter_appauth · GitHub) so I suspect that it is case sensitive on Android and needs the value to be all in lower. I’ll update the readme of the plugin to mention this so that hopefully others will see and don’t run into the same problem

2 Likes

Thank you for the heads up, Michael! I’ll update the post accordingly! :pray:

Hi, thanks for this post. In my case in initAction the response.refreshToken is returned as a null. Because you cannot store null in the storage, I get an exception. Do you have any idea why do i get null value?

i’m using google auth for connection. That can be the problem?

1 Like

Howdy, Peter! Welcome to the Auth0 Community. Thank you for reading the post.

Could you please expand a bit more on what you mean by using google auth for connection? :slight_smile:

I mention this in the thread of PR I created at Clean up of app code by MaikuB · Pull Request #2 · auth0-blog/flutter-authentication · GitHub. The article is missing the step of enabling refresh token rotation

cc @halacsy in case you don’t get notified about this reply

3 Likes

Thanks for letting us know!

1 Like

Thank you, Michael, for your PR contribution. I’ve reached to Amin for us to review and discuss the proposed changes.

1 Like

No worries, feel free to reject it even :stuck_out_tongue:

1 Like