Apple login button cant appear twice in a web page

Question

I am trying to put two login buttons in a same page this is because i have two users a student and a tutor. When there is only one button it is working fine but when i put another button on the same page i am getting error (Unhandled Rejection (ReferenceError): AppleID is not defined). Can anyone pls help me is there any way to have the apple login button twice on the same page? i am implemeting using reactjs and bootstrap.

I created two different client id for those two buttons. But i dont know whats the problem is

I have two div tags in my webpage one is for the user

This is for student. and the url is- https://test.example.com/sign-up

<div className="col-12 col-sm-12 mt-2">
 <AppleLogin
 clientId={globalVariable.APPLE_ID}                                                  
 redirectURI="https://test.example.com/sign-up"
 usePopup={true}
 callback={(e) => this.getAppleToken(e, 'student')}
 scope="email name"
 responseMode="query"
 render={renderProps => (
 <div className='btn btn-google'                              
  onClick={renderProps.onClick}                                                          
  disabled={renderProps.disabled}                                                        
 >                                                               
  Continue with Apple
</div>
)}
/>
</div>

i have another button for tutor and the url for tutor also same https://test.example.com/sign-up

<div className="col-12 col-sm-12 mt-2">
 <AppleLogin
 clientId={globalVariable.APPLE_ID}                                                  
 redirectURI="https://test.example.com/sign-up"
 usePopup={true}
 callback={(e) => this.getAppleToken(e, 'tutor')}
 scope="email name"
 responseMode="query"
 render={renderProps => (
 <div className='btn btn-google' 
 onClick={renderProps.onClick}                                                          disabled={renderProps.disabled}                                                     >                                                               Continue with Apple
</div>
)}
/>
</div>

When i have only one button it is working fine But when i have another button the react throws error. ReferenceError: AppleID is not defined

Answer 1

I suggest you to create two buttons instead of rendering buttons from apple library. And when you load the page do initialize the AppleID with single credentials. After that just add a click event to each button to perfrom Window.AppleID.auth.signIn()

Answer 2

I am using react js in front end with bootstrap. I faced this when i was trying to implement two apple login buttons on the same page. EX- there is a button for a student and another one for the tutor. When the second button was implemented i got react error. The issue here is the package that i installed using the command npm i react-apple-login What seems to be the issue here is that the package attaches the apple id to the id of the div element. So inorder to resolve this we have to pass an id with the button so that we can use them twice on a single page.

Answer 3

My solution

 const appleBtns = document.querySelectorAll('#appleid-signin');
 if (appleBtns?.length > 1) {
    appleBtns[0].click();
 }