Search code examples
flutterkeycloakopenid-connectpkce

Cannot authenticate via pkce flutter app with keycloak using openid_client

I have the following KeyCloak Client config, to use pkce authentication flow:

Realm: REALM

Client ID:              pkce-client
Client Protocol:        openid-connect
Access Type:            public
Standard Flow Enabled:  ON
Valid Redirect URIs:    http://localhost:4200/ 

Advanced Settings:
Proof Key for Code Exchange Code Challenge Method: S256

I try to authenticate in a flutter App with iOS Simulator via openid_client https://pub.dev/packages/openid_client like this

  authenticate() async {

    var uri = Uri.parse('http://$localhost:8180/auth/realms/REALM');
    var clientId = 'pkce-client';
    var scopes = List<String>.of(['profile', 'openid']);
    var port = 4200;
    var redirectUri = Uri.parse(http://localhost:4200/);

    var issuer = await Issuer.discover(uri);
    var client = new Client(issuer, clientId);

    urlLauncher(String url) async {
      if (await canLaunch(url)) {
        await launch(url, forceWebView: true);
      } else {
        throw 'Could not launch $url';
      }
    }

    var authenticator = new Authenticator(
        client,
        scopes: scopes,
        port: port,
        urlLancher: urlLauncher,
        redirectUri: redirectUri,
    );

    var auth = await authenticator.authorize();
    var token= await auth.getTokenResponse();
    return token;
  }

But it only gives me this web view: enter image description here

The Terminal where KeyCloak is running gives me the following lines:

INFO  [org.keycloak.protocol.oidc.endpoints.AuthorizationEndpointChecker] (default task-34) PKCE enforced Client without code challenge method.
WARN  [org.keycloak.events] (default task-34) type=LOGIN_ERROR, realmId=REALM, clientId=pkce-client, userId=null, ipAddress=127.0.0.1, error=invalid_request, response_type=code, redirect_uri=http://localhost:4200/, response_mode=query

When using Postman it worked and it provided me the Login page: enter image description here

But I have additional parameters there, which I do not know where to add them in Authenticator(..) when using openid_client, state is automatically added.

state: <state>
code_challenge: <code-challenge>
code_challenge_method: S256

Do I need to add these code_challenge parameters somewhere in the openid_client method?

Or do I need to change the redirect URL when using an App? I tried with the package_name like proposed here (https://githubmemory.com/repo/appsup-dart/openid_client/issues/32), but it did not work either.

Solution

  • See the source code:

          : flow = redirectUri == null
            ? Flow.authorizationCodeWithPKCE(client)
            : Flow.authorizationCode(client)

    You have specified redirectUri, so authorizationCode flow was used. But you want authorizationCodeWithPKCE flow in this case. So just make sure redirectUri is null and correct PKCE flow (with correct url parameters, e.g. code_challenge) will be used.