Expo authentication

[ruzolut]

I believe that we really need more documentation/guides on using next-auth to authenticate expo, I've been trying to figure out a way of authenticating the expo app with Google provider and next-auth but still no luck!

I also added credentials provider with email and password alongside Google OIDC and actually made the credentials provider use database sessions after some tinkering around.

And now I'm wondering how can I make the authentication through Expo work, I've been trying for more than week now...

[FadyAmir223]

the goal is to get the token id to use setToken()
in login procedure we can't get authjs.session-token cookie as we don't have access on the response
next-auth exposes /api/auth/session that is being used by useSession() and auth()
we can't fetch it on the server after signIn('credentials') as cookie is set in response not request
so we use it on the client like this

  const searchParams = useLocalSearchParams<{ redirectTo?: string }>()
  const utils = api.useUtils()
  const router = useRouter()

  const loginUser = api.auth.login.useMutation({
    onSuccess: async () => {
      const res = await fetch(`${getBaseUrl()}/api/auth/session`)
      const data = await res.json()

      if (!data) return
      setToken(data.sessionToken)

      await utils.invalidate()
      // @ts-expect-error redirectTo is valid route
      router.replace(searchParams.redirectTo ?? '/')
    },
    trpc: {
      context: {
        skipStream: true,
      },
    },
  })

the downside that is makes an extra request

update:
I discovered that we can get headers and cookies using next.js

// packages/api/src/routers/auth.ts
import { cookies, headers } from 'next/headers'

const mobileSessionId = () => {
  const isMobile = headers().get('x-trpc-source') === 'expo-react'
  if (isMobile) return cookies().get('authjs.session-token')?.value
}

login: publicProcedure.input(loginFormSchema).mutation(async ({ ctx }) => {
  // ...

  return {
    success: true,
    sessionId: mobileSessionId(),
  }
}),