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
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()