I have 2 Oauth elements on my settings page. For my business purposes I need to use 2 different vendors authentication. So the problems is this. Both of my Oauth elements perform tasks in onReturn.
When any one of these comeback from the web UI onReturn of both of these gets called. That's at least grossly counter-intuitive if for some reason not down right wrong. What am I missing? Or is it a bug? Is there a workaround? If this is by design then how can I do it so it doesn't happen for me?
<Section title={<Text bold align="center">Account 1</Text>}>
<Oauth
settingsKey="Auth1"
label={<Text align="center" bold="true">Login Here</Text>}
status=""
authorizeUrl="https://blah1"
clientId="blah2"
onReturn={async (data) => {
console.log("GOT SOMETHING IN OAUTH 1!!!");
}}
/>
</Section>
<Section title={<Text bold align="center">Account 2</Text>}>
<Oauth settingsKey="Auth2" label={<Text align="center" bold="true">Login there</Text>}
status=""
authorizeUrl="https://www.fitbit.com/oauth2/authorize"
requestTokenUrl="https://api.fitbit.com/oauth2/token"
clientId="blah3"
clientSecret="blah4"
scope="some scopes here"
onReturn={async (data) => { console.log("GOT SOMETHING IN OAUTH 2!!!"); }}
/>
</Section>Calling any 1 of these will produce log:
[8:06:29 AM] GOT SOMETHING IN OAUTH 1!!!
[8:06:29 AM] GOT SOMETHING IN OAUTH 2!!!
And the top element gets called first even if I actually used the second element.
Best Answer