https://supertokens.com/ logo
Title
p

productdevbook

01/05/2023, 7:56 AM
capacitor contiune with github but open chrome and return dont app
won't this be possible without sdk
r

rp

01/05/2023, 8:25 AM
You will need to make it redirect to your backend and from there redirect to the capacitor app
p

productdevbook

01/05/2023, 9:13 AM
used deeplink ?
r

rp

01/05/2023, 9:13 AM
yes
p

productdevbook

01/05/2023, 9:13 AM
ok it goes to the backend and login but then it stays on this screen
deeplink
adb shell am start -W -a android.intent.action.VIEW -d "https://aa.com/auth/callback/github?code=396asdasdas6158a82d19ad" com.aa.aa
this working but
adb shell am start -W -a android.intent.action.VIEW -d "https://aa.com/auth/callback/github?code=396asdasdas6158a82d19ad&state=bd29d9d38c67893c22a7c" com.aa.aa
dont open two params problem how to fixed ?
r

rp

01/05/2023, 9:14 AM
not really sure
p

productdevbook

01/05/2023, 9:14 AM
Deeplink does not work when more than 1 params are received from github
r

rp

01/05/2023, 9:15 AM
Im not sure why that would happen.. might be worth asking in capacitor community
p

productdevbook

01/05/2023, 9:20 AM
ts
<script lang="ts" setup>
import ThirdPartyEmailPassword from 'supertokens-web-js/recipe/thirdpartyemailpassword'

const router = useRouter()
onMounted(async () => {
  try {
    // we try and consume the authorisation code sent by the social login provider.
    // this knows which third party provider has sent the user back because
    // we store that in localstorage when the user clicks on the provider's button
    // on the sign in / up screen
    const response = await ThirdPartyEmailPassword.thirdPartySignInAndUp({})
    if (response.status !== 'OK')
      // this means that the third party provider does not have an email associated
      // with this user. In this case, we disallow the sign in and show a message
      // on the login UI
      return router.push('/auth?error=signin')

    // login / signup is successful, and we redirect the user to the home page.
    // Note that session cookies are added automatically and nothing needs to be
    // done here about them.
    setTimeout(() => {
      router.push('/home')
    }, 500)
  }
  catch (_) {
    // we show a something went wrong error in the auth page.
    router.push('/auth?error=signin')
  }
})
</script>

<template>
  <IonPage>
    <IonContent>
      <div class="flex flex-col space-y-12 items-center justify-center">
        <span class="sr-only">Loading...</span>
        <p>
          <span class="text-sm text-gray-500 dark:text-dark-400">
            Account is being created...
          </span>
        </p>
      </div>
    </IonContent>
  </IonPage>
</template>
same web same code
no error no log
network empty
r

rp

01/05/2023, 10:15 AM
Can you do
console.log(response)
and show me the output?
iam used handler
r

rp

01/05/2023, 10:59 AM
Does
await ThirdPartyEmailPassword.thirdPartySignInAndUp({})
get executed?
p

productdevbook

01/05/2023, 11:02 AM
no error try catch
ts
onMounted(async () => {
  console.log('0')
  try {
    console.log('1')
    const response = await ThirdPartyEmailPassword.thirdPartySignInAndUp({})
    console.log(response, '2')
    if (response.status !== 'OK')
      return router.push('/auth?error=signin')
    setTimeout(() => {
      router.push('/home')
    }, 500)
  }
  catch (err) {
    console.log('3', err)
    // we show a something went wrong error in the auth page.
    router.push('/auth?error=signin')
  }
})
r

rp

01/05/2023, 11:06 AM
and what console logs are being printed out?
p

productdevbook

01/05/2023, 11:06 AM
0, 1,3
ts
3 

Error: Auth state verification failed. The auth provider responded with an invalid state
    at Object.<anonymous> (supertokens-web-js_recipe_thirdpartyemailpassword.js?v=367c206e:1690:23)
    at step (supertokens-web-js_recipe_thirdpartyemailpassword.js?v=367c206e:1464:23)
    at Object.next (supertokens-web-js_recipe_thirdpartyemailpassword.js?v=367c206e:1411:18)
    at supertokens-web-js_recipe_thirdpartyemailpassword.js?v=367c206e:1392:71
    at new Promise (<anonymous>)
    at __awaiter (supertokens-web-js_recipe_thirdpartyemailpassword.js?v=367c206e:1374:14)
    at Object.verifyAndGetStateOrThrowError (supertokens-web-js_recipe_thirdpartyemailpassword.js?v=367c206e:1678:18)
    at Object.<anonymous> (supertokens-web-js_recipe_thirdpartyemailpassword.js?v=367c206e:2107:99)
    at step (supertokens-web-js_recipe_thirdpartyemailpassword.js?v=367c206e:1988:23)
    at Object.next (supertokens-web-js_recipe_thirdpartyemailpassword.js?v=367c206e:1935:18)
r

rp

01/05/2023, 11:10 AM
hmm. so this means that the callback state query param is invalid. Is the social login provider calling your backend API and you are redirecting to the capacitor app? If so, you need to make sure that you also pass along all the query params correctly in the redirect
p

productdevbook

01/05/2023, 11:18 AM
calling your backend API and you are redirecting to the capacitor app? Yes
same link copy desktop chrome app
working
but capacitor in app up error
r

rp

01/05/2023, 11:19 AM
are you initiating the flow from the capacitor app? Do you call the getAuthorizationUrl function when the user clicks on the social login button?
p

productdevbook

01/05/2023, 11:25 AM
ts

async function onGithubPressed() {
  const authorisationURL = props.mobile
    ? `${MOBILE_URL}/auth/callback/github`
    : `${FRONTEND_URL}/auth/callback/github`
  const authUrl = await ThirdPartyEmailPassword.getAuthorisationURLWithQueryParamsAndSetState({
    providerId: 'github',
    // This is where github should redirect the user back after login or error.
    // This URL goes on the github dashboard as well.
    authorisationURL,
  })
  if (props.mobile)
    window.open(authUrl, '_self')
  else
    window.location.assign(authUrl)
}
and back
https://site.com/auth/callback/github?code=56b15c548aaaaaaa85b8e9458d&state=f1776e5aaa067347bc1cb46c"
and open auto app
r

rp

01/05/2023, 11:26 AM
ok so the the callback URL, you have the
code
query param, but no
state
query param
p

productdevbook

01/05/2023, 11:26 AM
and work code
r

rp

01/05/2023, 11:27 AM
github also sends you a `state`query param which you need to make sure is in the redirect URL when redirecting to the capacitor app
p

productdevbook

01/05/2023, 11:28 AM
this state have ?
r

rp

01/05/2023, 11:28 AM
huh?
i think im being quite clear
you may want to try and see for bugs in the redirection logic on your backend
thats all i can help for for now. Thanks
p

productdevbook

01/05/2023, 11:29 AM
but same url desktop working ?
same vue code
r

rp

01/05/2023, 11:29 AM
the url on the webapp will also have a state query param.. please check
p

productdevbook

01/05/2023, 2:52 PM
<data android:scheme="http" android:host="localhost" android:port="3000" />
add android
adb shell am start -a android.intent.action.VIEW -d "http://localhost:3000/auth/callback/github?code=asdasdas\&state=aasda123123" com.xx.xx
dont fixed same problem