OAuth2 Giving 404

// index.tsx
// ...
<Button
                            className="bg-white flex flex-row gap-2"
                            variant="outline"
                            size="lg"

                            onTouchEnd={() => {
                                auth.signIn.google();
                            }}
                        >
                            <AntDesign name="google" size={24} color="black" />
                            <Label className="text-black">
                                Sign in with Google
                            </Label>
                        </Button>
// ...

// AuthContext.tsx
import { useContext, createContext, useState, ReactNode } from "react";
import { makeRedirectUri } from "expo-auth-session";
import * as WebBrowser from "expo-web-browser";
import { account } from "@/lib/appwrite";
import { OAuthProvider, Models } from "react-native-appwrite";
import { Text, SafeAreaView } from "react-native";
import { AuthContextType } from "~/types/AuthContextType";

const AuthContext = createContext<AuthContextType>({
    session: null,
    user: null,
    signIn: {
        google: () => {},
    },
    signOut: () => {},
});

const AuthProvider = ({ children }: { children: ReactNode }) => {
    const [loading, setLoading] = useState(false);
    const [session, setSession] = useState<Models.Session | null>(null);
    const [user, setUser] = useState<Models.Preferences | null>(null);

    const signIn = {
        google: async () => {
            // Create a deep link that works across Expo environments
            // Ensure localhost is used for the hostname to validation error for success/failure URLs
            const deepLink = new URL(
                makeRedirectUri({ preferLocalhost: true })
            );
            if (!deepLink.hostname) {
                deepLink.hostname = "localhost";
            }
            const scheme = `${deepLink.protocol}//`; // e.g. 'exp://' or 'playground://'

            // Explicitly URL-encode the redirect URLs
            const successRedirect = encodeURIComponent(deepLink.toString());
            const failureRedirect = encodeURIComponent(deepLink.toString() + "/fail");

            // Start OAuth flow
            const loginUrl = await account.createOAuth2Session(
                OAuthProvider.Google,
                successRedirect, // Use the encoded URL
                failureRedirect  // Use the encoded URL
            );

            console.log("Scheme: ", scheme);
            console.log("Deep Link: ", deepLink);
            console.log("Success Redirect: ", successRedirect);
            console.log("Failure Redirect: ", failureRedirect);
            console.log("Login URL: ", loginUrl);

            // Open loginUrl and listen for the scheme redirect
            const result = await WebBrowser.openAuthSessionAsync(
                `${loginUrl}`,
                scheme
            );

            console.log("Result: ", result);

            // Extract credentials from OAuth redirect URL
            if('url' in result) {
                const url = new URL(result.url);
                const secret = url.searchParams.get("secret");
                const userId = url.searchParams.get("userId");
                if(secret && userId) {
                   let session = await account.createSession(userId, secret);
                   setSession(session);
                   let user = await account.get();
                    setUser(user);
                }
                console.log(result, url, secret, userId, session);
            } else {
                throw new Error("OAuth login failed.");
            }

        },
    };

    const signOut = async (): Promise<boolean> => {
        if(session) {
            await account.deleteSession(session.$id);
            setSession(null);
        } else {
            setSession(null);
        }

        return true;
    };

    const contextData: AuthContextType = { session, user, signIn, signOut };
    return (
        <AuthContext.Provider value={contextData}>
            {loading ? (
                <SafeAreaView>
                    <Text>Loading...</Text>
                </SafeAreaView>
            ) : (
                children
            )}
        </AuthContext.Provider>
    );
};

const useAuth = () => {
    return useContext(AuthContext);
};

export { useAuth, AuthContext, AuthProvider };