fiction-expo-social-auth

v2.5.0

Published

6 months ago

Effortless social authentication for React, React Native (Expo), Vue.js, Svelte, and Next.js. Supports Google, Facebook, and Apple Sign-In with a unified API.

Fiction Expo Social Auth

Universal social authentication for React, React Native, Vue.js, Svelte, and Next.js.

Get Google, Facebook, and Apple Sign-In working in under 5 minutes — no OAuth credential management required!

✨ Features

🔐 Google Sign-In — Full support across all platforms
📘 Facebook Sign-In — OAuth flow for all platforms
🍎 Apple Sign-In — Native on iOS, web fallback on others
📱 Cross-Platform — React Native (Expo), React Web, Vue.js, Svelte, Next.js
🎯 Unified API — Same code pattern works everywhere
⚡ Framework Hooks/Stores — Native integrations for React, Vue, Svelte
🔷 TypeScript — Full type definitions included
🔒 Privacy First — We don't store any user data

📊 Platform Support

| Platform | Google | Facebook | Apple | |----------|:------:|:--------:|:-----:| | React / Next.js | ✅ | ✅ | ✅ | | React Native (Expo) | ✅ | ✅ | ✅ Native | | Vue.js 3 | ✅ | ✅ | ✅ | | Svelte | ✅ | ✅ | ✅ | | Angular | ✅ | ✅ | ✅ |

📦 Installation

npm install fiction-expo-social-auth

🚀 Quick Start

React / React Native / Next.js

import { useSocialLogin } from 'fiction-expo-social-auth';

function LoginButton() {
  const { login, loading, user, error } = useSocialLogin('google');

  const handleLogin = async () => {
    const result = await login();
    if (result.action === 'success') {
      console.log('Welcome!', result.user.name);
    }
  };

  return (
    <button onClick={handleLogin} disabled={loading}>
      {loading ? 'Signing in...' : 'Sign in with Google'}
    </button>
  );
}

Vue.js 3

<script setup>
import { useSocialLogin } from 'fiction-expo-social-auth/vue';

const google = useSocialLogin('google');
const facebook = useSocialLogin('facebook');
</script>

<template>
  <button @click="google.login" :disabled="google.loading.value">
    {{ google.loading.value ? 'Signing in...' : 'Sign in with Google' }}
  </button>
  
  <button @click="facebook.login" :disabled="facebook.loading.value">
    {{ facebook.loading.value ? 'Signing in...' : 'Sign in with Facebook' }}
  </button>
  
  <div v-if="google.user.value">
    Welcome, {{ google.user.value.name }}!
  </div>
</template>

Svelte

<script>
  import { createSocialLogin } from 'fiction-expo-social-auth/svelte';
  
  const google = createSocialLogin('google');
  const facebook = createSocialLogin('facebook');
</script>

<button on:click={google.login} disabled={$google.loading}>
  {$google.loading ? 'Signing in...' : 'Sign in with Google'}
</button>

<button on:click={facebook.login} disabled={$facebook.loading}>
  {$facebook.loading ? 'Signing in...' : 'Sign in with Facebook'}
</button>

{#if $google.user}
  <p>Welcome, {$google.user.name}!</p>
{/if}

Angular

// In your component
import { Component } from '@angular/core';
import { SocialLoginService, createSocialLoginService } from 'fiction-expo-social-auth/angular';

@Component({
  selector: 'app-login',
  template: `
    <button (click)="login()" [disabled]="auth.loading">
      {{ auth.loading ? 'Signing in...' : 'Sign in with Google' }}
    </button>
    <div *ngIf="auth.user">Welcome, {{ auth.user.name }}!</div>
  `
})
export class LoginComponent {
  auth = createSocialLoginService();
  
  async login() {
    await this.auth.loginWithGoogle();
  }
}

Direct Functions (Any Framework)

import { googleLogin, facebookLogin, appleLogin } from 'fiction-expo-social-auth';

// Works in any JavaScript environment
const result = await googleLogin();

if (result.action === 'success') {
  console.log('Email:', result.user.email);
  console.log('Name:', result.user.name);
  console.log('Photo:', result.user.photo);
  if (result.user.phoneNumber) {
    console.log('Phone:', result.user.phoneNumber);
  }
}

📖 API Reference

React Hook: `useSocialLogin(provider)`

const { login, loading, error, user, result, reset } = useSocialLogin('google');

| Property | Type | Description | |----------|------|-------------| | login | () => Promise<AuthResult> | Trigger login flow | | loading | boolean | True while authenticating | | error | string \| null | Error message if failed | | user | AuthUser \| null | User data if successful | | result | AuthResult \| null | Full result object | | reset | () => void | Reset state |

Vue Composable: `useSocialLogin(provider)`

Import from fiction-expo-social-auth/vue

const { login, loading, error, user, result, reset } = useSocialLogin('google');

Returns Readonly<Ref<T>> for reactive properties.

Svelte Store: `createSocialLogin(provider)`

Import from fiction-expo-social-auth/svelte

const google = createSocialLogin('google');

// Access state with $ prefix
$google.loading
$google.error
$google.user

// Call methods directly
await google.login();
google.reset();

AuthResult

// Success
{
  action: 'success';
  user: {
    id: string;
    email: string;
    name: string;
    photo: string;
  };
}

// Failure
{
  action: 'failed';
  error: string;
  errorCode?: string;
}

🍎 Apple Sign-In Setup (iOS)

For native Apple Sign-In on iOS:

npx expo install expo-apple-authentication

Configure app.json:

{
  "expo": {
    "ios": {
      "usesAppleSignIn": true
    },
    "plugins": ["expo-apple-authentication"]
  }
}

⚠️ Error Handling

const result = await googleLogin();

if (result.action === 'failed') {
  switch (result.errorCode) {
    case 'ERR_REQUEST_CANCELED':
      // User cancelled - don't show error
      break;
    case 'ERR_NETWORK':
      alert('Check your internet connection');
      break;
    default:
      alert(result.error);
  }
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme