"audience" parameter in Flutter Web SDK causes a BadRequest

[mdebruin93]

Hello,

I’m using this code for my Login page. It works fine if I remove the “audience” parameter, however, as soon as I add it to make sure I can call my API the retrieval of the access token gives a BadRequest.

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final Auth0Web _auth0web = Auth0Web("{domain}", "{ClientId}");

  Future<void> authenticate() async {
    try {
      return _auth0web.loginWithRedirect(audience: "http://localhost:7145/", redirectUrl: "http://localhost:3000");
    } catch (e) {
      print(e);
    }
  }

  @override
  Widget build(BuildContext context) {
    var localizations = getLocalizations(context);

    return PlatformScaffold(
      appBar: PlatformAppBar(
        title: Text(localizations.lbl_login),
        material: (context, platform) => MaterialAppBarData(centerTitle: true),
        backgroundColor: ColorConfig.appBarColor.withOpacity(1),
      ),
      body: Stack(
        alignment: Alignment.center,
        children: [
          ResponsiveRowColumn(
            layout: ResponsiveRowColumnType.COLUMN,
            children: [
              ResponsiveRowColumnItem(
                child: Expanded(
                  child: Container(
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        colors: [
                          ColorConfig.authScreensGradientFrom.withOpacity(1),
                          ColorConfig.authScreensGradientTo.withOpacity(1),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
          ResponsiveRowColumn(
            layout: ResponsiveRowColumnType.COLUMN,
            columnMainAxisAlignment: MainAxisAlignment.center,
            children: [
              ResponsiveRowColumnItem(
                child: SingleChildScrollView(
                  child: PlatformElevatedButton(
                    cupertino: (context, platform) => CupertinoElevatedButtonData(
                      color: ColorConfig.black,
                    ),
                    material: (context, platform) => MaterialElevatedButtonData(
                      style: ElevatedButton.styleFrom(
                        backgroundColor: ColorConfig.black,
                        fixedSize: const Size(250, 50),
                      ),
                    ),
                    onPressed: authenticate,
                    child: Text(localizations.lbl_login),
                  ),
                ),
              )
            ],
          ),
        ],
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    var authService = ServiceContainer.instance.getSingleton<AuthService>(AuthService.instanceName);

    _auth0web.onLoad().then(
          (credentials) => setState(
            () {
              print("credentials not empty ${credentials != null}");

              if (credentials != null) {
                authService.writeUserCredentialsToCache(credentials);
                context.go("/");
              }
            },
          ),
        );
  }
}

I know what a BadRequest means. My real question is, what data am I missing? I can’t seem to find anything in the docs.

Thanks for the help in advance,

Michael

[tyf]

Hey there @mdebruin93 welcome to the community!

@mdebruin93

I’m using this code for my Login page. It works fine if I remove the “audience” parameter, however, as soon as I add it to make sure I can call my API the retrieval of the access token gives a BadRequest.

That’s good to know at least the login is successful without the audience.

@mdebruin93

I know what a BadRequest means. My real question is, what data am I missing? I can’t seem to find anything in the docs.

It’s hard to know just looking at the code you’ve shared. Are you able to reproduce in our Flutter sample app Web flow? The way you are passing the audience param in loginWithRedirect seems fine assuming the param is exactly the same as the identifier of the API you’ve registered in Auth0. I have up to this point not been able to reproduce what you are seeing in the sample app below:

auth0-samples/auth0-flutter-samples/blob/14cbfd641671c8edf3a6b285ca738569b3a3303a/sample/lib/example_app.dart#L43

[mdebruin93]

Hey @tyf ,

Thank you for your reply and taking some time to help me out.
I was actually able to reproduce the error in the sample app, it’s what made me post the issue I’m experiencing right here.

[mdebruin93]

The error I’m getting from the network tab is:
invalid_request : The specified redirect_uri ‘http://localhost:3000’ does not have a registered origin.

Is it possible that I’ve forgot to configure something on the API configuration in the dashboard? It’s weird that adding the audience parameter causes this.

[tyf]

Thanks for confirming you can reproduce in the sample app - That error is typically related to the “Allowed Web Origins” field in your application settings in the Auth0 dashboard. Can you confirm what you have added there? Are you using a “Native” application type?

[mdebruin93]

Thanks for your reply.
It solved the first issue. Now I’m getting a “Error: consent required” error.
Which is odd since I’m literally getting a consent while authenticating.