Using mocked JWT's with Frontend Libraries to Call Mock API

[eettaa]

Before opening, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have read the guide for submitting bug reports.
• [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React Native

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

N/A

Describe the bug

Frontend Auth Library requires network + prod Cognito pool, even when backend api is being mocked.

(this is identical to https://github.com/aws-amplify/amplify-cli/issues/8963 ; I'm not sure whether the issue is best addressed by the CLI team or the library team as the solution involves integration between the two).

I have an Amplify backend with a GraphQL API, Cognito user pool Auth, and basic API @model and @auth rules enabled. I am trying to connect a mocked version of this api to a locally deployed version of my frontend without relying on an off-machine auth flow.

When I run amplify mock api and open the standard GraphIQL Explorer at the provided IP address (localhost in this case), I can easily mock an auth token using the "Auth" tab of the UI. I can inspect the full JWT by opening developer tools and inspecting local storage (I believe the "AMPLIFY" key contains the relevant JWT fields).

I am looking for a seamless way to plumb this (or a similarly mocked) JWT to a locally deployed frontend so that the relevant Auth library calls use this token. Just as amplify mock api updates the backend url in aws-exports.js, I am hoping there is a way to update a relevant auth field.

Without this, I believe my locally deployed frontend makes a network(!) call to my prod(!) cognito user pool to obtain a token to then send to my mock API. This breaks isolation and requires internet access, both of which I'd like to avoid in my local deployment workflow.

Is there any way to do this? Is there a good workaround?

Thank you for your help!

Which Category is your question related to? Auth Mock

Amplify CLI Version 6.3.1

What AWS Services are you utilizing? Amplify (Under the hood: Amplify API, Auth, Function)

Expected behavior

When connecting a frontend to a mocked Amplify API with cognito auth enabled, the Auth() frontend library seamlessly mocks the necessary authentication data for the api.

Reproduction steps

Connect any cognito authentication-enabled frontend to a locally deployed mocked version of its backend (using amplify mock api). Observe that signin/authentication will not work without network access.

Code Snippet

No response

Log output

No response

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[chrisbonifacio]

Hi @eettaa 👋 thanks for raising this issue! This is an interesting use case but I don't think it's currently possible to mock auth. Labeling this as a feature request and transferring for the CLI repo.

[eettaa]

Thanks @chrisbonifacio ! Can you suggest any workarounds? For example, Is there any way to pass in an authentication credential to the Auth FE library? Otherwise I suppose I could mock out the entire library, but I would prefer not to do that if possible...

[james-ingold]

+1 for this. It would be awesome to mock auth, I am working through the same sort of issue as well right now. For workarounds, Localstack has a way to support Cognito for Pro licensed users and then there is Cognito-Local which I'm checking out. However, I think the best workaround at this time might just be to have a dev user pool for doing development. Frontend devs hit a dev graphql endpoint which talks to a dev cognito pool. Continuously deliver the backend. You could also configure the access token timeout there to be pretty long lived, I think max is 3650 days. I would agree though, I would love to be able to run the entire backend stack locally with a local cognito pool which can handle lambda triggers as well.

[eettaa]

When I run amplify mock api and open the standard GraphIQL Explorer at the provided IP address (localhost in this case), I can easily mock an auth token using the "Auth" tab of the UI.

Following up: through more testing I have discovered that these mocked JWT's aren't actually sufficient even for auth to play nicely with the mocked API (accessed via GraphIQL, which would be a prerequisite for taking the time to solve plumbing them to a frontend). One example limitation of the mock JWT is that if the owner field is not expressly provided to an @auth(owner) -protected data type in the GraphQL mutation, the API seems to make a call to the cloud user pool to populate the owner field, at which point the cloud user pool rejects the mocked token (as it should), resulting in an empty owner field and a forever-inaccessible object. AIUI this renders mocked API's an ineffective development tool as soon as your project begins implementing userpool auth rules, which is quite unfortunate as I imagine nearly all projects use this feature (it is super useful).

Both this problem and the frontend problem cited in previous comments would be solved if there were a way to mock a user/id pool locally. Is there any way to upvote that feature?

[GeorgeBellTMH]

To simplify this ticket, really we just need to mock the signIn method of auth to return a specific JWT based on the userid...signup, signOut etc would be bonus, even the pw could be ignored to get us a happy path...even if the list of JWTs was just stored in an json file this would likely be ok...and in the console you could save the JWT...

[phani-srikar]

Hi, we have a community PR to support your feature request https://github.com/aws-amplify/amplify-cli/pull/10861, please give your comments/feedback there. Thanks