Get Started with Flutter Authentication

Hello, Macfol! Welcome to the Auth0 Community and thank you for your feedback. Could help me understand, please, what having a “keycloak locally” means? :slight_smile: Thanks!

Hello,
I created a free account, cloned the repo and tested this Flutter app. I just changed the “Auth0 Variables” to the data for my application. I only tested with the Android emulators. So far I was able to see the Universal Login and insert a user credentials (email + password). Then nothing happens, only a progress indicator. I waited 15 minutes, and nothing. Then I closed the app and launched it again. This time, when clicking on the “login” button, I only get an empty page, like the picture that @pamelak added to his post.
I tried with 2 emulators. Same thing on both.
Then I decided to create my own Flutter project with Android Studio, I used the same code as the one from the demo repo, and I tested again. This time, when I enter the email and password, it returns an “Unauthorized” (Exception happens on “authorizeAndExchangeCode”). When I check the Logs on the Dashboard, I see a Success login followed by a Failed exchange. So, it always failed.

1 Like

Bad configuration on the dashboard perhaps?

1 Like

I just added the Client secret as a parameter to the “appAuth.authorizeAndExchangeCode” method, and then everything worked. What am I doing wrong ? I should not add the client secret inside my mobile app, correct?

1 Like

Howdy, Ed! Welcome to the Auth0 Community and thank you for reading the blog post. Let me bring this question to my team to figure out what could be happening :pray:

1 Like

I know that web support in Flutter is still experimental, but I’m trying to show my customer that we can have an application that works on all platforms AND works like a charm with our recently integrated Auth0 SSO, so that would be really awesome if Auth0 helped Michael with this issue to bring web support to this plugin. Or maybe a native official Auth0 SDK for Flutter?

Hi Amin,

Great article. Really helped me to get started with Flutter and Android Studio.
We have already been using Auth0 for a while in our web front-end and inter micro service communication, so it was “too easy” setting it up.

My next step though is for our app to be able to upload photo’s from the phone to our API.
Do you have any suggestions on how to implement that in Flutter?
(Are there any follow up articles that I haven’t found yet for instance?)

Thanks again for a great Getting Started project.

Stephan

1 Like

Thanks for showing interest in that. At the moment that’s the only content we have in terms of integrating with Flutter. Once we have any new repos or blog posts we’ll make sure to share it with you!

My understanding is Keycloak is an alternative to Auth0 so it’s unlikely you’ll find answers around that here. There have been reports of others that have successfully used Keycloak but it’s not something I’m personally familiar with. You might need to check their documentation on what’s required. You may want to jump on one of the Flutter Slack/Discord communities if you’re stuck.

@martin.elias.zalazar take a look at the code for the getUserDetails() method that passes the token as part of the Authorization header. This should demonstrate what you’re after from what I understand. For future reference, I suggest you avoid pasting your tokens as it’s sensitive information that can be used to access APIs

@eduardomt correct, you shouldn’t need to specify a secret. Did you create a new application via the dashboard? if so, when creating it, you should specify that your application type is native. Perhaps the issue here is you tried to use the generic app that is already there when the tenant is created. I’ve personally haven’t tried using it but it works with a native application without specifying the secret

@sebastien.arbogast1 great to hear you got it running. In the absence of a plugin, what you might want to consider doing is create a class that on Android and iOS will use the flutter_appauth plugin whilst for web it’ll handle the logic separately. My understanding the Auth0 JS SDK is obtained via NPM and Flutter apps can’t consume node packages. This potentially means a complete rewrite in Dart is needed. It might be that there are existing Flutter plugins that could be used specifically for just the web. For example, you could try to see if the oauth2 plugin works for the web as it claims based on the tags on pub.dev

@stephan1 uploading photos generally requires uploading raw byte data via a POST request. You should pass your token as part of the Authorization header to the appropriate API as you do so. The Flutter team has a codelab for using the Google Photos API that even includes code for uploading photos here. If you go through the codelab and use that as a reference, that should guide you in the right direction where the code could be adapted to suit your purpose

It doesn’t seem to: How to listen for the callback in Flutter web? · Issue #88 · dart-lang/oauth2 · GitHub
At least it hasn’t been tested or documented.

Amin, writes in the article that: " …a complete secure logout is beyond the scope of this article ".

I want to have a logout where the access token is cleared from cookies so that the user will have to login again if they logout. Using the promptValues: [‘login’] in the login method is not a viable solution for me since this would require the user to login every time even if they have not logged out.

Is it possible to do this ?

Hey there Daniel!

Thanks for passing that feedback! I’ll relay it to our content team so they can review it. For now it’s the only resource we have on integrating with Flutter but will see where it goes!

1 Like

Hey Konrad,

have you heard anything from the content team?

Hey there Daniel!

They have lots of stuff on their plate and lots of content to cover in various stacks so I don’t think it will be released anytime soon.

1 Like

Hey there,

I have an error from iOS version :

lutter: login error: PlatformException(authorize_and_exchange_code_failed, Failed to authorize: ID Token parsing failed, null, null)

In Android everything works fine.

Anyone have any ideas ?

Thanks

1 Like

Let me bring that to our content team attention!