UNPKG

expo-router-auth-guard

Version:

A minimal yet powerful starter to quickly launch a mobile app using Expo and Supabase, including:

120 lines (91 loc) • 3.86 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
# 📦 React Native + Expo + Supabase Starter A minimal yet powerful starter to quickly launch a mobile app using Expo and Supabase, including: - 🔐 Authentication (sign up / sign in) - ⚛️ React authentication context with session management - 🧭 Expo Router for file-based navigation - � React Query for data management - 🔒 Secure storage for redirect handling - �💅 Clear and extensible structure - 📱 Android / iOS / Web compatible ## 🚀 Getting Started ```bash npx expo-router-auth-guard my_app ``` --- ## 🧠 Features - ✅ Supabase Auth (login, signup, auto-refresh) - 🧭 Expo Router for file-based navigation - ⚙️ Global Auth Context (AuthProvider) with session state - 🔄 React Query for efficient data management - 🔒 Secure storage for authentication redirects - 🧱 Simple and modular project structure - ✨ TypeScript with strict mode enabled - 🎨 Styled components with consistent form styles --- ## 🗂️ Project Structure ``` . ├── app/ │ ├── (public)/ # Public screens (auth) │ │ ├── signin.tsx # Login screen │ │ ├── signup.tsx # Registration screen │ │ ├── welcome.tsx # Welcome/landing screen │ │ └── test.tsx # Test screen │ ├── (tabs)/ # Protected tabbed screens │ │ ├── _layout.tsx # Tab navigation layout │ │ ├── index.tsx # Home tab │ │ ├── explore.tsx # Explore tab │ │ └── test.tsx # Test tab │ ├── _layout.tsx # Root layout with auth routing │ ├── index.tsx # App entry point │ └── +not-found.tsx # 404 screen ├── components/ # Shared UI components │ ├── ui/ # UI-specific components │ └── ... # Reusable components ├── hooks/ │ ├── authContext.tsx # Global auth context │ ├── useRequireAuth.ts # Auth guard hook │ └── ... # Custom hooks ├── styles/ │ └── form.styles.ts # Form styling ├── utils/ │ └── supabase.ts # Supabase client instance ├── constants/ # App constants ├── assets/ # Static assets └── ... ``` --- ## 🔑 Supabase Setup 1. Create a project on [supabase.com](https://supabase.com) 2. Go to Project Settings > API 3. Copy your anon key and project URL 4. Create a `.env.local` file at the root: ```ini EXPO_PUBLIC_SUPABASE_URL=https://your-project.supabase.co EXPO_PUBLIC_SUPABASE_KEY=your-anon-key ``` 5. The Supabase client in `utils/supabase.ts` will automatically use these environment variables. ## 🔐 Authentication Flow - **Public routes**: `(public)` group - accessible without authentication - **Protected routes**: `(tabs)` group - requires authentication - **Auto-redirect**: Users are automatically redirected based on auth state - **Secure storage**: Handles redirect paths for better UX after login --- ## 📄 Scripts ```bash npm run start # Start the app with Expo npm run android # Start on Android emulator npm run ios # Start on iOS simulator npm run web # Start web version npm run lint # Lint the codebase with ESLint ``` ## 📦 Key Dependencies - **Expo**: Framework and platform - **Expo Router**: File-based navigation - **Supabase**: Backend and authentication - **React Query**: Data fetching and caching - **Expo Secure Store**: Secure local storage - **TypeScript**: Type safety --- ## 🧑‍💻 Author Made with ❤️ by [@vandevelde-dimitri](https://github.com/vandevelde-dimitri)