V6 Next.js Amplify: Ability to pass in /login or /signup for opening hosted ui

[Meags27]

Is this related to a new or existing framework?

Next.js

Is this related to a new or existing API?

Authentication

Is this related to another service?

No response

Describe the feature you'd like to request

With the new v6 Amplify for Next.js, they removed the launchUri option which I used to be able to customize the urlOpener in order to change the hosted UI URL from '/oauth2/authorize?' to either '/login?' or '/signup?' so a user could click a button and get directed to either sign up or signin.

Instead, now it calls oauthSignIn and this:

const URL = https://${oauthConfig.domain}/oauth2/authorize?${queryString}; window.open(URL, SELF);

So I can't change the string "/oauth2/authorize?" easily without changing the Amplify source code.

Thanks!

Describe the solution you'd like

Can a parameter be passed in so we can customize the url as needed?

Describe alternatives you've considered

N/A

Additional context

No response

Is this something that you'd be interested in working on?

• [ ] 👋 I may be able to implement this feature request
• [ ] ⚠️ This feature might incur a breaking change

[nadetastic]

Related to #11336

[abdallahshaban557]

Hi @Meags27 - we are trying to understand how this feature is impacting your applications and users. Would you consider this a blocker to you using v6 of the Amplify JS library?

[Meags27]

@abdallahshaban557 It's not a deal breaker to using v6, but I would vastly prefer to be able to have the option to run the site the way we did before where we have the navigation bar as "Login" and "Signup" as two different buttons to select and to go to the right page.

[abdallahshaban557]

Got it - thank you for clarifying. Would you be open to using the Amplify Authenticator connected UI component instead of hosted UI? We are planning on releasing major updates to help you fully control the UI of the default experience as well.

[Meags27]

@abdallahshaban557 I can't use the Amplify Authenticator as it doesn't support custom scopes and we wanted the option to be able to whitelist users to certain API calls in API Gateway. This issue here: https://github.com/aws-amplify/amplify-js/issues/3732

We would potentially move to using it if custom scopes were added like the others mentioned in that issue thread.

[abdallahshaban557]

Ah - got it @Meags27 - that makes sense. We are working closely with the Cognito team to resolve this issue on their end, but your reason for needing to use the HostedUI is understandable now. We have added the feature to enable this customization of the URL that opens up for HostedUI to our backlog.

[Meags27]

I'm wanting to launch for production soon, do you have any suggestions for how I could make a workaround for this?

A user needs to click sign up to agree to TOS and privacy policy before being navigated to Hosted UI, so it's weird when they click sign up but end up being directed to the /login route of the hosted UI.

Edit: This is seriously preventing us from moving to production.

[subliminality]

Hi @Meags27 - we are trying to understand how this feature is impacting your applications and users. Would you consider this a blocker to you using v6 of the Amplify JS library?

This issue is definitely preventing me from finishing the migration to V6 for one of our projects.

[israx]

@subliminality could you clarify how are you using v5 to open the sign-up view from Hosted UI ?

[subliminality]

Yes in v5 i overrode the urlOpener on oauth when configuring Amplify

oauth: {
  domain,
  scope,
  redirectSignIn,
  redirectSignOut,
  responseType: 'code',
  urlOpener
}

const urlOpener = async (url) => {
  const redirect = localStorage.getItem(LOGIN_REDIRECT) // login, signup, forgotPassword
  const signupUrl = url.replace(
    /\/oauth2\/authorize\?/,
    `/${redirect ? redirect : 'login'}?`
  )
  return launchUri(url)
}
const launchUri = (url) => {
  const windowProxy = window.open(url, SELF)
  if (windowProxy) {
    return Promise.resolve(windowProxy)
  } else {
    return Promise.reject()
  }
}

[israx]

@subliminality Thank you for clarifying the usage. v6 doesn't allow to modify the urlOpener. Ideally we would support this use case from the signInWithRedirect API itself. We will follow up with any updates on this feature request.

[mn-prp]

This upgrade broke our app until we rolled back the changes. We also override the urlOpener in v5 to go straight to sign up page on hosted ui. Like others, the hosted ui is a hard requirement for our use case. I am strongly considering just giving up on Amplify for our company and rolling our own solution, which we've already had to do on mobile, but this change is making web seem necessary too.

[trickstival]

overriding urlOpener is a big feature for hybrid apps that want to use an in-app browser. I can't upgrade to amplify v6 because of that