English | 한국어

@authon/react-native

Drop-in React Native authentication with secure token storage — Auth0 alternative

Prerequisites

Before installing the SDK, create an Authon project and get your API keys:

1. Create a project at Authon Dashboard

   • Click "Create Project" and enter your app name
   • Select the authentication methods you want (Email/Password, OAuth providers, etc.)

2. Get your API keys from Project Settings → API Keys

   • Publishable Key (pk_live_...) — use in your frontend code
   • Test Key (pk_test_...) — for development, enables Dev Teleport

3. Configure OAuth providers (optional) in Project Settings → OAuth

   • Add Google, Apple, GitHub, etc. with their respective Client ID and Secret
   • Set the redirect URL to https://api.authon.dev/v1/auth/oauth/redirect

Test vs Live keys: Use pk_test_... during development. Switch to pk_live_... before deploying to production. Test keys use a sandbox environment with no rate limits.

Install

npm install @authon/react-native react-native-svg
npx expo install expo-secure-store expo-web-browser

Quick Start

// App.tsx — complete working file
import React, { useState } from 'react';
import { View, Text, Button, TextInput, ActivityIndicator } from 'react-native';
import { AuthonProvider, useAuthon, useUser } from '@authon/react-native';
import * as SecureStore from 'expo-secure-store';

const storage = {
  getItem: (key: string) => SecureStore.getItemAsync(key),
  setItem: (key: string, value: string) => SecureStore.setItemAsync(key, value),
  removeItem: (key: string) => SecureStore.deleteItemAsync(key),
};

function HomeScreen() {
  const { isLoaded, isSignedIn, user, signIn, signOut } = useAuthon();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  if (!isLoaded) return <ActivityIndicator />;

  if (isSignedIn) {
    return (
      <View style={{ padding: 24 }}>
        <Text>Welcome, {user?.displayName ?? user?.email}</Text>
        <Button title="Sign Out" onPress={signOut} />
      </View>
    );
  }

  return (
    <View style={{ padding: 24, gap: 12 }}>
      <TextInput placeholder="Email" value={email} onChangeText={setEmail} autoCapitalize="none" />
      <TextInput placeholder="Password" value={password} onChangeText={setPassword} secureTextEntry />
      <Button title="Sign In" onPress={() => signIn({ strategy: 'email_password', email, password })} />
    </View>
  );
}

export default function App() {
  return (
    <AuthonProvider
      publishableKey="pk_live_YOUR_PUBLISHABLE_KEY"
      storage={storage}
    >
      <HomeScreen />
    </AuthonProvider>
  );
}

Common Tasks

Add Google OAuth Login

import { Linking } from 'react-native';
import { useAuthon } from '@authon/react-native';

function GoogleButton() {
  const { startOAuth, completeOAuth } = useAuthon();

  const handlePress = async () => {
    const { url, state } = await startOAuth('google');
    await Linking.openURL(url);
    await completeOAuth(state);
  };

  return <Button title="Sign in with Google" onPress={handlePress} />;
}

Add Google OAuth (Expo recommended)

import * as WebBrowser from 'expo-web-browser';
import { useAuthon } from '@authon/react-native';

function GoogleButton() {
  const { startOAuth, completeOAuth } = useAuthon();

  const handlePress = async () => {
    const { url, state } = await startOAuth('google', {
      flow: 'redirect',
      returnTo: 'https://your-domain.com/mobile-callback',
    });
    const pollPromise = completeOAuth(state);
    await WebBrowser.openAuthSessionAsync(url, 'myapp://oauth-callback');
    await pollPromise;
  };

  return <Button title="Sign in with Google" onPress={handlePress} />;
}

Get Current User

import { useUser } from '@authon/react-native';

function Profile() {
  const { isLoaded, isSignedIn, user } = useUser();
  if (!isLoaded) return <ActivityIndicator />;
  if (!isSignedIn) return <Text>Not signed in</Text>;
  return <Text>Email: {user?.email}</Text>;
}

Add Email/Password Auth

const { signIn } = useAuthon();
await signIn({ strategy: 'email_password', email: '[email protected]', password: 'MyP@ssw0rd' });

Handle Sign Out

const { signOut } = useAuthon();
await signOut();

Environment Variables

| Variable | Required | Description | |----------|----------|-------------| | AUTHON_PUBLISHABLE_KEY | Yes | Project publishable key (pk_live_... or pk_test_...) | | AUTHON_API_URL | No | Optional — defaults to api.authon.dev |

API Reference

Components

| Component | Description | |-----------|-------------| | <AuthonProvider> | Provider with publishableKey, apiUrl, storage | | <SocialButtons> | Renders all enabled OAuth provider buttons | | <SocialButton> | Single OAuth provider button with icon |

Hooks

| Hook | Returns | |------|---------| | useAuthon() | { isLoaded, isSignedIn, user, signIn, signUp, signOut, getToken, providers, branding, startOAuth, completeOAuth, on, client } | | useUser() | { isLoaded, isSignedIn, user } | | useAuthonWeb3() | Web3 wallet auth | | useAuthonPasswordless() | OTP and magic link | | useAuthonPasskeys() | Passkey registration and auth |

Comparison

| Feature | Authon | Clerk | Auth0 | |---------|--------|-------|-------| | Pricing | Free | $25/mo+ | $23/mo+ | | React Native | Yes | Yes | Yes | | Secure token storage | Yes | Yes | Yes | | Web3 auth | Yes | No | No | | MFA/Passkeys | Yes | Yes | Yes |

License

MIT