useWeb3AuthConnect

Hook to sign a user in. Call connectTo with an AUTH_CONNECTION constant. For OAuth and passwordless connections, the SDK opens the sign-in flow in an in-app browser and returns to your app through redirectUrl. When you pass an idToken, the SDK skips the browser and derives the wallet directly from the token.

Import

import { useWeb3AuthConnect } from '@web3auth/react-native-sdk'

Usage

Google

import { AUTH_CONNECTION, useWeb3AuthConnect } from '@web3auth/react-native-sdk'
import { Button, Text, View } from 'react-native'

function LoginView() {
  const { connectTo, loading, error } = useWeb3AuthConnect()

  return (
    <View>
      <Button
        title={loading ? 'Signing in…' : 'Sign in with Google'}
        disabled={loading}
        onPress={() => connectTo({ authConnection: AUTH_CONNECTION.GOOGLE })}
      />
      {error && <Text>{error.message}</Text>}
    </View>
  )
}

Email passwordless

import { AUTH_CONNECTION, useWeb3AuthConnect } from '@web3auth/react-native-sdk'
import { useState } from 'react'
import { Button, TextInput, View } from 'react-native'

function EmailLogin() {
  const { connectTo, loading } = useWeb3AuthConnect()
  const [email, setEmail] = useState('')

  return (
    <View>
      <TextInput
        value={email}
        onChangeText={setEmail}
        placeholder="you@example.com"
        keyboardType="email-address"
        autoCapitalize="none"
      />
      <Button
        title="Continue with email"
        disabled={loading || !email}
        onPress={() =>
          connectTo({
            authConnection: AUTH_CONNECTION.EMAIL_PASSWORDLESS,
            extraLoginOptions: { login_hint: email },
          })
        }
      />
    </View>
  )
}

Custom JWT

import { AUTH_CONNECTION, useWeb3AuthConnect } from '@web3auth/react-native-sdk'
import { Button } from 'react-native'

function FirebaseJwtLoginView() {
  const { connectTo, loading } = useWeb3AuthConnect()

  const login = async () => {
    // Get the JWT from your own auth provider, for example Firebase
    const idToken = await getFirebaseIdToken()

    await connectTo({
      authConnection: AUTH_CONNECTION.CUSTOM,
      authConnectionId: '<YOUR_CONNECTION_ID>', // Connection ID from the dashboard
      idToken,
    })
  }

  return <Button title="Sign in with Firebase" disabled={loading} onPress={login} />
}

See Custom authentication for the token requirements of this flow.

Grouped connection

import { AUTH_CONNECTION, useWeb3AuthConnect } from '@web3auth/react-native-sdk'
import { Button, View } from 'react-native'

function GroupedLoginView() {
  const { connectTo, loading } = useWeb3AuthConnect()

  const loginWithGoogle = () =>
    connectTo({
      authConnection: AUTH_CONNECTION.GOOGLE,
      authConnectionId: 'w3a-google',
      groupedAuthConnectionId: 'aggregate-sapphire',
    })

  const loginWithAuth0Email = () =>
    connectTo({
      authConnection: AUTH_CONNECTION.CUSTOM,
      authConnectionId: 'w3a-a0-email-passwordless',
      groupedAuthConnectionId: 'aggregate-sapphire', // same group, same wallet
    })

  return (
    <View>
      <Button title="Google" disabled={loading} onPress={loginWithGoogle} />
      <Button title="Email" disabled={loading} onPress={loginWithAuth0Email} />
    </View>
  )
}

Return type

import { type IUseWeb3AuthConnect } from '@web3auth/react-native-sdk'

connectTo

(params: SdkLoginParams) => Promise<Connection | null>

Starts sign-in with the specified connection. Resolves with the new connection on success. On failure, it resolves with null and sets error instead of throwing, so check the return value or error after you await it.

loading

boolean

true while sign-in is in progress.

error

Web3authRNError | null

Error from the most recent connectTo call, or null.

isConnected

boolean

true when the user has an active session. Mirrors useWeb3Auth().isConnected.

connectTo parameters

Parameters

Parameter	Required	Description
authConnection	Yes	Authentication method. Pass an AUTH_CONNECTION.* constant.
authConnectionId?	No	Connection ID from the dashboard. Required for AUTH_CONNECTION.CUSTOM and for grouped connections. Also use it to target a specific connection when you have several of the same type.
groupedAuthConnectionId?	No	Grouped connection ID from the dashboard. Connections in the same group produce the same wallet for the same user.
idToken?	No	JWT from your own auth provider. When set, the SDK skips the in-app browser and derives the wallet from the token directly. Requires authConnectionId. See Custom authentication.
extraLoginOptions?	No	Extra OAuth parameters for browser-based sign-in, for example login_hint (email or phone number for passwordless), domain (Auth0 domain), and verifierIdField (JWT claim used as the user ID).
mfaLevel?	No	When to show the MFA setup screen: 'optional', 'mandatory', or 'none' (MFA_LEVELS.OPTIONAL, MFA_LEVELS.MANDATORY, MFA_LEVELS.NONE).
curve?	No	Key curve: SUPPORTED_KEY_CURVES.SECP256K1 or SUPPORTED_KEY_CURVES.ED25519.
dappShare?	No	Dapp share for MFA-enabled custom connections. The SDK stores and reuses the dapp share automatically; see Dapp share.
appState?	No	Custom state string returned in userInfo.appState after sign-in.
dappUrl?	No	Custom redirect URL for the manage MFA flow.

Interface

// SdkLoginParams = LoginParams from @web3auth/auth (without getWalletKey) & { idToken?: string }
type SdkLoginParams = {
  authConnection: AUTH_CONNECTION_TYPE | CUSTOM_AUTH_CONNECTION_TYPE
  authConnectionId?: string
  groupedAuthConnectionId?: string
  idToken?: string
  extraLoginOptions?: ExtraLoginOptions
  mfaLevel?: MfaLevelType
  curve?: SUPPORTED_KEY_CURVES_TYPE
  dappShare?: string
  appState?: string
  dappUrl?: string
  recordId?: string
  loginSource?: string
}

AUTH_CONNECTION values

Import AUTH_CONNECTION from @web3auth/react-native-sdk.

Constant	Sign-in method
AUTH_CONNECTION.GOOGLE	Google
AUTH_CONNECTION.FACEBOOK	Facebook
AUTH_CONNECTION.APPLE	Sign in with Apple
AUTH_CONNECTION.DISCORD	Discord
AUTH_CONNECTION.TWITTER	X (Twitter)
AUTH_CONNECTION.GITHUB	GitHub
AUTH_CONNECTION.REDDIT	Reddit
AUTH_CONNECTION.TWITCH	Twitch
AUTH_CONNECTION.LINE	LINE
AUTH_CONNECTION.KAKAO	Kakao
AUTH_CONNECTION.LINKEDIN	LinkedIn
AUTH_CONNECTION.WECHAT	WeChat
AUTH_CONNECTION.TELEGRAM	Telegram
AUTH_CONNECTION.FARCASTER	Farcaster
AUTH_CONNECTION.EMAIL_PASSWORDLESS	One-time code sent to an email address
AUTH_CONNECTION.SMS_PASSWORDLESS	One-time code sent to a phone number
AUTH_CONNECTION.PASSKEYS	Passkey
AUTH_CONNECTION.AUTHENTICATOR	Authenticator app
AUTH_CONNECTION.CUSTOM	Custom connection (Auth0, Firebase, any JWT issuer)

Related

• Sign in usage guide
• Custom authentication