How to Use auth resources without an Amplify backend?

[flutterocks]

Description

There is amplify documentation for React on Use auth resources without an Amplify backend, but there is nothing for Flutter.

Is this possible with amplify in flutter?

Categories

• [ ] Analytics
• [ ] API (REST)
• [ ] API (GraphQL)
• [X] Auth
• [X] Authenticator
• [ ] DataStore
• [ ] Notifications (Push)
• [ ] Storage

Steps to Reproduce

n/a

Screenshots

No response

Platforms

• [ ] iOS
• [ ] Android
• [ ] Web
• [ ] macOS
• [ ] Windows
• [ ] Linux

Flutter Version

3.19

Amplify Flutter Version

1.7

Deployment Method

Custom Pipeline

Schema

No response

[tyllark]

Hello @flutterocks thank you for submitting this issue. Flutter can use auth resources without an Amplify backend by modifying amplifyconfiguration.dart in gen 1 or modifying amplify_outputs.json in gen 2.

Please let us know if the linked documentation answers your question!

[flutterocks]

How do I consume the amplify_outputs.json or generate amplifyconfiguration based on it? I am not using Amplify as a backend, just cognito

[Jordan-Nelson]

If you are not using Amplify at all you can still use the defineBackend function with an empty object and then add your own cognito resources following this example: https://docs.amplify.aws/flutter/build-a-backend/auth/use-existing-cognito-resources/#use-auth-resources-with-an-amplify-backend

You can then use amplify to generate the amplifyconfiguration.dart (npx ampx generate outputs --format dart --outputs-version 0) or amplify_outputs.dart (npx ampx generate outputs --format dart). Note that Amplify Flutter does not yet support amplify_outputs.dart, but should soon.

If you do not want to go that route you could write the amplifyconfiguration.dart (and later amplify_outputs.dart) manually.

[flutterocks]

Ensure you are running ampx commands in root of your project (i.e. in the parent of the 'amplify' directory).

Do I need to create a NPM project to run this?

[Jordan-Nelson]

Yes, you would need to create a npm project. I suggest creating an amplify backend app (npm create amplify@latest -y) but you can then remove the auth/data resources which are added by default.

[Jordan-Nelson]

@flutterocks let me know if you have any other questions

[flutterocks]

Ended up getting things to work in a jank way, but I'd recommend improving the docs on this as it's quite confusing. The amplify React docs for using auth resources without an Amplify backend was a breeze to follow

[Jordan-Nelson]

@flutterocks Amplify JS supports configuring Amplify with a JavaScript object. Amplify Flutter requires passing in a string. We have considered accepting a Dart object that would be similar to the JS API. That API might look something like this:

Amplify.configure(
  AmplifyOutputs(
    auth: AuthOutputs(userPoolId: '1234', region: 'us-west-02'),
  ),
);

If you are looking for an API like that, we can turn this into a feature request.

[Jordan-Nelson]

@flutterocks I am going to close this out as it sounds like you got this working and I don't believe any docs update is required at this time. The reason that the react docs are clearer is because Amplify JS supports configuring Amplify with a JS object. Amplify Flutter does not support configuring Amplify via a dart object. If you would like to see this supported please open a feature request for it. Thanks.