codingki · SainyTK · Aug 18, 2023
diff --git a/template-typescript-bottom-tabs-supabase-auth-flow/.env.example b/template-typescript-bottom-tabs-supabase-auth-flow/.env.example
@@ -0,0 +1,2 @@
+SUPERBASE_URL=
+SUPERBASE_KEY=
diff --git a/template-typescript-bottom-tabs-supabase-auth-flow/.gitignore b/template-typescript-bottom-tabs-supabase-auth-flow/.gitignore
@@ -1,13 +1,37 @@
-node_modules/**/*
-.expo/*
-npm-debug.*
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
 *.jks
 *.p8
 *.p12
 *.key
 *.mobileprovision
-*.orig.*
-web-build/
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
 
 # macOS
 .DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+.env
diff --git a/template-typescript-bottom-tabs-supabase-auth-flow/README.md b/template-typescript-bottom-tabs-supabase-auth-flow/README.md
@@ -33,17 +33,19 @@ Typescript Template starter with React Navigation Bottom Tabs and Supabase auth
 ### Supabase Setup
 
 - Set up a new Supabase.io project
-- Fill your supabase credentials to your config inside `./src/initSupabase.ts`
+- Copy .env.example to .env
+- Fill your supabase credentials to your .env file inside (`SUPERBASE_URL` and `SUPERBASE_KEY`)
 - You can find your supabase credentials in your project -> settings -> API
 
   ```jsx
-  // Better put your these secret keys in .env file
-  export const supabase = createClient(
-  	"supabaseUrl", "supabaseKey",
-  	{
-  		localStorage: AsyncStorage as any,
-  	}
-  );
+  export const supabase = createClient(superbaseUrl, superbaseKey, {
+   auth: {
+      storage: AsyncStorage,
+      autoRefreshToken: true,
+      persistSession: true,
+      detectSessionInUrl: false,
+   },
+   });
   ```
 
 and you good to go!
@@ -104,3 +106,6 @@ These are the folders and the functionality all in `src/`
 if you find these useful don't forget to give it a star ⭐ and share it to your friends ❤️
 
 Reach me on [twitter](https://twitter.com/kikiding/)
+
+# Notes
+1. When .env file is updated, the `env.d.ts` needs to be updated accordingly. This is done to avoid TypeScript complaining about type error.
diff --git a/template-typescript-bottom-tabs-supabase-auth-flow/app.json b/template-typescript-bottom-tabs-supabase-auth-flow/app.json
@@ -5,6 +5,7 @@
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",
@@ -22,7 +23,7 @@
     "android": {
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
-        "backgroundColor": "#FFFFFF"
+        "backgroundColor": "#ffffff"
       }
     },
     "web": {

diff --git a/template-typescript-bottom-tabs-supabase-auth-flow/assets/splash.png b/template-typescript-bottom-tabs-supabase-auth-flow/assets/splash.png
diff --git a/template-typescript-bottom-tabs-supabase-auth-flow/babel.config.js b/template-typescript-bottom-tabs-supabase-auth-flow/babel.config.js
@@ -1,6 +1,16 @@
-module.exports = function(api) {
+module.exports = function (api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        "module:react-native-dotenv",
+        {
+          envName: "APP_ENV",
+          moduleName: "@env",
+          path: ".env"
+        }
+      ]
+    ]
   };
 };
diff --git a/template-typescript-bottom-tabs-supabase-auth-flow/env.d.ts b/template-typescript-bottom-tabs-supabase-auth-flow/env.d.ts
@@ -0,0 +1,4 @@
+declare module '@env' {
+    export const SUPERBASE_URL: string;
+    export const SUPERBASE_KEY: string;
+}