I can't complete the login flow

[panthe]

Hi, I'm trying to use this plugins in Flutter Web but I can't complete the login flow. After the login on the Keycloack form I can see this error in console:

Could not navigate to initial route. The requested route name was: "/#state=c00172b4-29bb-498d-b71c-f670bde3ac34&session_state=e6bedf54-8b20-4859-879f-a8d29f8c990f&code=2b497277-70fd-4d84-822e-56a6cede598a.e6bedf54-8b20-4859-879f-a8d29f8c990f.76acd799-3553-4b37-8e26-2d21caacf601" There was no corresponding route in the app, and therefore the initial route specified will be ignored and "/" will be used instead.

==================================================================================================== [+3171 ms] ┌─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── [ +1 ms] │ #0 packages/keycloak_flutter/src/keycloak_service.dart 27:9 init [ +1 ms] │ #1 packages/keycloak_flutter/src/keycloak_service.dart 23:20 init [ ] ├┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄ [ +1 ms] │ 💡 -->inited kc null [ +1 ms] └─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── [+13107 ms] Error: Unexpected null value.

I've simply edit your example code with mine parameters.

Can you help me?

[gibahjoe]

Hello, The error in your issue is a known issue with flutter. You can track it here https://github.com/flutter/flutter/issues/73114 and https://github.com/dart-lang/sdk/issues/44602

Please can you describe the other issue you are experiencing?

[panthe]

Hello, thanks for your reply. My main issue is that I think that the silent redirect doesn't work. The null issue is secondary.

After that I have inserted username and password in Keycloak I receive this error:

======== Exception caught by Flutter framework ===================================================== The following message was thrown: Could not navigate to initial route. The requested route name was: "/#state=9b69dea8-e3e7-4125-9a9a-d9c5328fef20&session_state=6bbac370-07d6-448d-99de-53dfc97a732f&code=a8c5e4cf-23a3-4743-93f4-f65a897276cc.6bbac370-07d6-448d-99de-53dfc97a732f.76acd799-3553-4b37-8e26-2d21caacf601" There was no corresponding route in the app, and therefore the initial route specified will be ignored and "/" will be used instead.

I think that is because the redirect to silent-check-sso.html doesn't work for me? Have you any suggestion?

I use the code of your example but with my parameters. Thanks in advance

[gibahjoe]

Hi. You need to handle the redirected route.

Try this. Add it to your material app

onGenerateRoute: (routeSettings) {
            var uri = Uri.tryParse(routeSettings.name);
            if (uri.fragment.startsWith('state')) {
              return MaterialPageRoute(
                  builder: (_) => Center(
                        child: CircularProgressIndicator(),
                      ));
            }
            switch (Uri.parse(routeSettings.name).path) {
              case '':
              case '/':
                return MaterialPageRoute(
                  builder: (_) => Center(
                    child: Text('Home page'),
                  ),
                );
            }
            return MaterialPageRoute(
              builder: (_) => Center(
                child: Text('Route ${routeSettings.name} not found'),
              ),
            );
          },

Let me know if it works. I will update the example

[panthe]

Hi, in this way I handled the redirect route but I think that silent-check-sso.html doesn't work for me. If I investigate the network tab in Chrome I can't view the token in the localhost response but, as you seen, I can receive the state and the session state.

Can you suggest me a specific configuration for KeyCloack?

In React I can use the same credential for accessing this same service that I'm trying with Flutter and all works fine with the same js library and version but I use these parameters too: realmPublicKey: realmPublicKey, bearerOnly: true,

I think that are missing one final step for obtain the token.

[gibahjoe]

The configuration I use on the keycloak server for the client is

accessType: public ImplicitFlow: enabled standard flow: enabled Direct access grant: enabled

Try those

What keycloak version do you use? Also, you are trying to do a browser login right?

[panthe]

I've 10.0.2 version both on server and js library.

I've checked my configuration and I have the same parameters than you: accessType: public ImplicitFlow: enabled standard flow: enabled Direct access grant: enabled

I'm trying with Flutter web the browser login.

Have you tried some other combinations of the KeycloakInitOptions than this one?

initOptions: KeycloakInitOptions( onLoad: 'check-sso', silentCheckSsoRedirectUri: '${window.location.origin}/silent-check-sso.html', ),

[gibahjoe]

I use 12.0.1 but I don't think it's a version issue. The configuration in the sample app is exactly what I use.

Can you send me a minimal reproduction project let me take a look. This really is a weird issue.

Also, what flutter version do you use?

Did you make the updates to your index.html and add the check sso html file?

[panthe]

I use 1.25.0-8.2.pre beta version of Flutter. I've simply clone your project and apply my configuration. I've create a test account for you, if you want to try my SSO directly.

user testSSO pass testSSO2020

return keycloakService ..init( config: KeycloakConfig( url: 'https://myurl.it/auth/', // Keycloak auth base url realm: 'myRealm', clientId: 'myClientId', ), initOptions: KeycloakInitOptions( onLoad: 'check-sso', silentCheckSsoRedirectUri: '${window.location.origin}/silent-check-sso.html', ), );

But you can run flutter web on port 3000 adding the --web-port=3000 parameter on run.

[gibahjoe]

Alright. Will take a look

[gibahjoe]

I get invalid username or password

[panthe]

Sorry, now works if you can try.

[gibahjoe]

So, looking at it, change

Index.html

<script src="js/keycloak.js"></script>

to

<script src="https://test-webservice.motornet.it/auth/js/keycloak.js"></script>

then try again.

The invalid route error still shows however, it still works. If you want to handle web routing properly (handle query params, fragments, path params etc), you might want to look into routing libraries. The one I use is https://pub.dev/packages/flutter_modular

[panthe]

I've tried the change that you provide to me but in the response I can't see the token.

Thank you for your help.

• I've removed the data of KeyCloack service from the previous comment.

[gibahjoe]

Maybe theres something else preventing it from working.

From what i noticed, there is a lag between after you login and the homepage updating. so maybe wait a little while.

Also, you can check your browser console for errors

This is the result of the last time i tried.

[panthe]

Thank you for your time!!!