[FR] Authenticator - How to initiate confirm sign-in with new password?

[ssljivic]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Authenticator

How is your app built?

Vite

What browsers are you seeing the problem on?

Chrome

Which region are you seeing the problem in?

No response

Please describe your bug.

When a new user is created in Cognito, an email with a link that has the initial password and the user's email is sent.
An example of the link would be https://my.webapp/[email protected]&password=12345678

I could not find any documentation or sample that shows how to show the amplify UI for confirm sing-in with new password.

What's the expected behaviour?

I would like to directly show the user the change password interface and somehow pass the username and password that came from the URL query,m so that the user does not have to enter them manually.

Help us reproduce the bug!

N/A

Code Snippet

No response

Console log output

No response

Additional information and screenshots

No response

[ssljivic]

I could create my own UI to collect new user password, but I would like to reuse the existing amplify-ui for that.

[ssljivic]

The best I could do for now is to pre-fill username and password:

formFields={{
      signIn: {
        username: {
          defaultValue: username,
          isReadOnly: true,
        },
        password: {
          defaultValue: password,
          isReadOnly: true,
        },
      },
    }}

However, the user still needs to submit the form, which is not ideal.
After the sign-in form is submitted amiplify-ui correctly shows the change-password form.

[ssljivic]

In the end, I ended up using useAuthenticator and its' submitForm function:

const auth = useAuthenticator((ctx) => [ctx.authStatus])
...
auth.submitForm({
        type: 'SIGN_IN',
        username: searchParams.get('email'),
        password: searchParams.get('code'),
      })

However, I saw a comment that submitForm is intended for internal use and that it is not mentioned in the documentation for that reason. It would be nice to have an "official" way to achieve this, but for now, this will do the trick.