@wattsoft/auth-app

A complete, production-ready authentication library for React Native and Expo apps.

Zero authentication code needed. Just import and use. 🎉

Features

• ✅ Pre-built Auth Screens - Sign-in & sign-up screens, ready to use
• ✅ Email & Password Authentication - Standard authentication flow
• ✅ Google Sign-In - OAuth 2.0 integration
• ✅ Biometric Authentication - Fingerprint & Face ID
• ✅ Passkey Support - Passwordless authentication
• ✅ TypeScript - Full type safety
• ✅ Secure Storage - Encrypted token storage
• ✅ Clerk Integration - Powered by Clerk
• ✅ Custom Hooks - For advanced use cases
• ✅ Zero Config - Works out of the box

Quick Start

1. Install

npm install @wattsoft/auth-app

2. Setup

import { AuthProvider } from "@wattsoft/auth-app";

export default function App() {
  return (
    <AuthProvider publishableKey="pk_test_....">{/* Your app */}</AuthProvider>
  );
}

3. Use Screens

import { SignInScreen, SignUpScreen } from '@wattsoft/auth-app';

// In your navigation
<Stack.Screen name="sign-in" component={SignInScreen} />
<Stack.Screen name="sign-up" component={SignUpScreen} />

That's it! Your app now has complete authentication. ✅

Documentation

• SETUP_GUIDE.md - Complete setup instructions
• INTEGRATION_EXAMPLE.md - Step-by-step integration guide
• PUBLISHING_GUIDE.md - How to publish to npm

Available Exports

Screens (Ready to Use)

• SignInScreen - Complete sign-in UI
• SignUpScreen - Complete sign-up UI

Components

• BiometricSignIn - Biometric authentication UI
• GoogleSignIn - Google OAuth UI
• Passkey - Passkey authentication UI
• SignOut - Sign-out button

Hooks (Custom Implementation)

• useAuth() - Get auth state
• useSignInForm() - Email/password sign-in
• useSignUpForm() - Email/password sign-up
• useBiometric() - Biometric auth
• useSignOutUser() - Sign-out logic

Provider

• AuthProvider - Setup component
• initializeAuth() - Initialize auth

Example App Structure

import {
  AuthProvider,
  useAuth,
  SignInScreen,
  SignUpScreen,
} from "@wattsoft/auth-app";

function AuthStack() {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen name="sign-in" component={SignInScreen} />
      <Stack.Screen name="sign-up" component={SignUpScreen} />
    </Stack.Navigator>
  );
}

function AppStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="home" component={HomeScreen} />
    </Stack.Navigator>
  );
}

function RootNavigator() {
  const { isLoaded, isSignedIn } = useAuth();

  if (!isLoaded) return null;

  return (
    <NavigationContainer>
      {isSignedIn ? <AppStack /> : <AuthStack />}
    </NavigationContainer>
  );
}

export default function App() {
  return (
    <AuthProvider publishableKey={CLERK_PUBLISHABLE_KEY}>
      <RootNavigator />
    </AuthProvider>
  );
}

Requirements

• React 18.0+
• React Native 0.70+
• Expo 50+
• Clerk account (free tier available)

Installation with Dependencies

npm install @wattsoft/auth-app expo-router @clerk/clerk-expo \
  expo-local-authentication expo-secure-store @react-navigation/native \
  react-native-gesture-handler react-native-reanimated \
  react-native-safe-area-context react-native-screens

Setup Clerk

1. Create free account at clerk.com
2. Create new application
3. Get your Publishable Key
4. Add to your app

<AuthProvider publishableKey="pk_test_your_key_here">

What's NOT Needed

❌ No authentication logic to write
❌ No form validation to build
❌ No secure storage setup
❌ No OAuth configuration code
❌ No biometric handling code
❌ No error handling to implement

✅ All included and ready to use!

API Reference

<AuthProvider />

Wraps your app to enable authentication.

<AuthProvider publishableKey={string}>{children}</AuthProvider>

useAuth()

Returns current authentication state.

const { isLoaded, isSignedIn, user, session } = useAuth();

useSignInForm()

Returns sign-in methods.

const { signInWithEmail, loading, error } = useSignInForm();
await signInWithEmail("[email protected]", "password");

useSignOutUser()

Returns sign-out method.

const { signOutUser, loading } = useSignOutUser();
await signOutUser();

Browser Support

• ✅ iOS 11+
• ✅ Android 6+
• ✅ Web (experimental)

TypeScript

Fully typed with TypeScript. All types exported from @wattsoft/auth-app.

import type {
  AuthState,
  SignInResult,
  UseSignInFormResult,
} from "@wattsoft/auth-app";

Troubleshooting

See SETUP_GUIDE.md#Troubleshooting

Contributing

Found a bug? Have a feature request? Open an issue!

License

MIT

Support

• 📧 Email: [email protected]
• 🐛 GitHub Issues: Report a bug
• 📖 Docs: SETUP_GUIDE.md

Made with ❤️ by Wattsoft

Quick Links:

• npm Package
• GitHub Repository
• Clerk Documentation

npm run reset-project

This command will move the starter code to the app-example directory and create a blank app directory where you can start developing.

Learn more

To learn more about developing your project with Expo, look at the following resources:

• Expo documentation: Learn fundamentals, or go into advanced topics with our guides.
• Learn Expo tutorial: Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.

Join the community

Join our community of developers creating universal apps.

• Expo on GitHub: View our open source platform and contribute.
• Discord community: Chat with Expo users and ask questions.