0

I want to hide the Submit Button in Amplify Default UI, but not sure how to achieve it. Didn't observe any documentation at Amplify.

Here is my code:

function App() {
  return (
    <AmplifyAuthenticator>
        <AmplifyFormSection  slot="sign-in">
        <AmplifyOauthButton />
        </AmplifyFormSection>
        <div className="App">
        <Users></Users>
      </div>
    </AmplifyAuthenticator>
  );
}

Screenshot:

enter image description here

Ranopriyo Neogy
  • 175
  • 2
  • 14

1 Answers1

1

You can place the AmplifyOauthButton as the slot, just like below:

function App() {
  return (
    <AmplifyAuthenticator>
      <AmplifyOauthButton slot="sign-in" />
    </AmplifyAuthenticator>
  );
}
Lucas Yamamoto
  • 41
  • 4
  • I tried this solution however I need to wrap the App component with AmplifyAuthenticator for the Authentication process to take place. Any suggestion howe to achieve it ? I updated the code above with the app component that needs to be authenticated. – Ranopriyo Neogy Nov 12 '21 at 01:18
  • Have you tried using the HOC `withAuthenticator`? – Lucas Yamamoto Nov 12 '21 at 01:34
  • I used it before but didn't find a way to edit the Login Form so to keep the Federated oAuth Login Button and remove everything else. Can you share a code snippet if you have an alternate way to do it ? – Ranopriyo Neogy Nov 12 '21 at 03:07
  • @RanopriyoNeogy I'm sorry for oversimplify the answer. I've edited the answer with the correct way. I've tested here and turns out that you can achieve it just using calling the `AmplifyOauthButton` with the `slot="sign-in"` – Lucas Yamamoto Nov 12 '21 at 04:15
  • Thanks, @Lucas Yamamoto looks like they removed the AmplifyOauthButton in new versions.. Is there a way to achieve the same functionality now ? – Ranopriyo Neogy Jun 22 '23 at 21:58