complete appwrite auth app

Author: hiteshchoudhary

appwriteauth11/.env

@@ -0,0 +1,2 @@
+APPWRITE_ENDPOINT='https://cloud.appwrite.io/v1'
+APPWRITE_PROJECT_ID='646b4406a3cd89842af0'

appwriteauth11/src/appwrite/AppwriteContext.tsx

@@ -0,0 +1,34 @@
+import { View, Text } from 'react-native'
+import React, { FC, createContext } from 'react'
+
+import Appwrite from './service'
+import { PropsWithChildren } from 'react';
+import { useState } from 'react';
+
+type AppContextType = {
+    appwrite: Appwrite;
+    isLoggedIn: boolean;
+    setIsLoggedIn: (isLoggedIn: boolean) => void
+}
+
+export const AppwriteContext = createContext<AppContextType>({
+    appwrite: new Appwrite(),
+    isLoggedIn: false,
+    setIsLoggedIn: () => {}
+})
+
+export const AppwriteProvider: FC<PropsWithChildren> = ({children}) => {
+    const [isLoggedIn, setIsLoggedIn] = useState(false)
+    const defaultValue = {
+        appwrite: new Appwrite(),
+        isLoggedIn,
+        setIsLoggedIn,
+    }
+  return (
+    <AppwriteContext.Provider value={defaultValue}>
+      {children}
+    </AppwriteContext.Provider>
+  )
+}
+
+export default AppwriteContext

appwriteauth11/src/components/Loading.tsx

@@ -0,0 +1,22 @@
+import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+
+const Loading = () => {
+  return (
+    <View style={styles.container}>
+      <ActivityIndicator size="large" color="#1d9bf0" />
+      <Text>Loading</Text>
+    </View>
+  )
+}
+
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center'
+    }
+})
+
+export default Loading

appwriteauth11/src/routes/AppStack.tsx

@@ -0,0 +1,29 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import { createNativeStackNavigator} from '@react-navigation/native-stack'
+
+import Home from '../screens/Home'
+
+export type AppStackParamList = {
+    Home: undefined;
+}
+
+const Stack = createNativeStackNavigator<AppStackParamList>();
+
+
+export const AppStack = () => {
+  return (
+    <Stack.Navigator
+    screenOptions={{
+      headerTitleAlign:'center',
+      headerBackTitleVisible: false
+    }}
+    >
+      <Stack.Screen name='Home' component={Home} />
+    </Stack.Navigator>
+  )
+}
+
+
+
+

appwriteauth11/src/routes/AuthStack.tsx

@@ -0,0 +1,31 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import { createNativeStackNavigator} from '@react-navigation/native-stack'
+
+import Signup from '../screens/Signup'
+import Login from '../screens/Login'
+
+export type AuthStackParamList = {
+    Login: undefined;
+    Signup: undefined;
+}
+
+const Stack = createNativeStackNavigator<AuthStackParamList>();
+
+
+export const AuthStack = () => {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        headerTitleAlign: 'center',
+        headerBackTitleVisible: false,
+      }}>
+      <Stack.Screen name="Login" component={Login} />
+      <Stack.Screen name="Signup" component={Signup} />
+    </Stack.Navigator>
+  );
+}
+
+
+
+

appwriteauth11/src/routes/Router.tsx

@@ -0,0 +1,43 @@
+import { View, Text } from 'react-native'
+import React, { useContext, useEffect, useState } from 'react'
+import {NavigationContainer} from '@react-navigation/native'
+
+import {AppwriteContext} from '../appwrite/AppwriteContext';
+import Loading from '../components/Loading';
+
+//Routes
+import { AppStack } from './AppStack';
+import { AuthStack } from './AuthStack';
+
+
+
+export const Router = () => {
+    const [isLoading, setIsLoading] = useState<boolean>(true)
+    const {appwrite, isLoggedIn,setIsLoggedIn} = useContext(AppwriteContext)
+
+    useEffect(() => {
+      appwrite
+      .getCurrentUser()
+      .then(response => {
+        setIsLoading(false)
+        if (response) {
+            setIsLoggedIn(true)
+        }
+      })
+      .catch(_ => {
+        setIsLoading(false)
+        setIsLoggedIn(false)
+      })
+    }, [appwrite, setIsLoggedIn])
+    
+    if (isLoading) {
+        return <Loading />
+    }
+
+  return (
+    <NavigationContainer>
+        {isLoggedIn ? <AppStack /> : <AuthStack/> }
+    </NavigationContainer>
+  )
+}
+

appwriteauth11/src/screens/Home.tsx

@@ -0,0 +1,108 @@
+import { StyleSheet, Text, View, SafeAreaView, Image } from 'react-native'
+import React, { useContext, useState, useEffect } from 'react'
+//react native elements
+import { FAB } from '@rneui/themed'
+//Snackbar
+import Snackbar from 'react-native-snackbar'
+
+//context API
+import {AppwriteContext} from '../appwrite/AppwriteContext'
+
+type UserObj = {
+  name: String;
+  email: String;
+}
+
+
+
+const Home = () => {
+  const [userData, setUserData] = useState<UserObj>()
+  const {appwrite, setIsLoggedIn} = useContext(AppwriteContext)
+
+  const handleLogout = () => {
+    appwrite.logout()
+    .then(() => {
+      setIsLoggedIn(false);
+      Snackbar.show({
+        text: 'Logout Successful',
+        duration: Snackbar.LENGTH_SHORT
+      })
+    })
+  }
+
+  useEffect(() => {
+    appwrite.getCurrentUser()
+    .then(response => {
+      if (response) {
+        const user: UserObj = {
+          name: response.name,
+          email: response.email
+        }
+        setUserData(user)
+      }
+    })
+  }, [appwrite])
+  
+
+  
+    return (
+      <SafeAreaView style={styles.container}>
+        <View style={styles.welcomeContainer}>
+          <Image
+            source={{
+              uri: 'https://appwrite.io/images-ee/blog/og-private-beta.png',
+              width: 400,
+              height: 300,
+              cache: 'default',
+            }}
+            resizeMode="contain"
+          />
+          <Text style={styles.message}>
+            Build Fast. Scale Big. All in One Place.
+          </Text>
+          {userData && (
+            <View style={styles.userContainer}>
+              <Text style={styles.userDetails}>Name: {userData.name}</Text>
+              <Text style={styles.userDetails}>Email: {userData.email}</Text>
+            </View>
+          )}
+        </View>
+        <FAB
+          placement="right"
+          color="#f02e65"
+          size="large"
+          title="Logout"
+          icon={{name: 'logout', color: '#FFFFFF'}}
+          onPress={handleLogout}
+        />
+      </SafeAreaView>
+    );
+  
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#0B0D32',
+  },
+  welcomeContainer: {
+    padding: 12,
+
+    flex: 1,
+    alignItems: 'center',
+  },
+  message: {
+    fontSize: 26,
+    fontWeight: '500',
+    color: '#FFFFFF',
+  },
+  userContainer: {
+    marginTop: 24,
+  },
+  userDetails: {
+    fontSize: 20,
+    color: '#FFFFFF',
+  },
+});
+
+export default Home