feat(auth): add Auth Context provider with user data refactoring

App.tsx

@@ -4,7 +4,7 @@ import { GluestackUIProvider } from '@gluestack-ui/themed';
 
 import { config } from './config/gluestack-ui.config';
 
-import { AuthContext } from '@contexts/AuthContext';
+import { AuthContextProvider } from '@contexts/AuthContext';
 
 import { Loading } from '@components/Loading';
 import { Routes } from '@routes/index';
@@ -17,17 +17,8 @@ export default function App() {
 
   return (
     <GluestackUIProvider config={config}>
-      <AuthContext.Provider
+      <AuthContextProvider>{fontsLoaded ? <Routes /> : <Loading />}</AuthContextProvider>
-        value={{
+
-          user: {
-            id: '1',
-            name: 'John Doe',
-            email: 'john.doe@email.com',
-            avatar: 'https://i.pravatar.cc/200',
-          },
-        }}>
-        {fontsLoaded ? <Routes /> : <Loading />}
-      </AuthContext.Provider>
       <StatusBar barStyle="light-content" backgroundColor="transparent" translucent />
     </GluestackUIProvider>
   );

src/contexts/AuthContext.tsx

@@ -6,4 +6,24 @@ type AuthContextData = {
   user: UserDTO;
 };
 
+type AuthContextProviderProps = {
+  children: React.ReactNode;
+};
+
 export const AuthContext = createContext<AuthContextData>({} as AuthContextData);
+
+export function AuthContextProvider({ children }: AuthContextProviderProps) {
+  return (
+    <AuthContext.Provider
+      value={{
+        user: {
+          id: '1',
+          name: 'John Doe',
+          email: 'john.doe@email.com',
+          avatar: 'https://i.pravatar.cc/200',
+        },
+      }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}