mav Posts - Convex Community

mav

•Created by mav on 5/9/2024 in #support-community

Custom Auth integration with Privy

Hey everyone! I'm trying to get a custom auth integration working, but can't quite crack it. I use Privy.io web3 auth and this is what I came up with so far:

 export function usePrivyAuth() {
    const { getAccessToken, authenticated, ready } = usePrivy();

    const fetchAccessToken = useCallback(
        async ({ forceRefreshToken = true }: { forceRefreshToken: boolean }) => {
            if (forceRefreshToken) {
                const accessToken = await getAccessToken();
                if (accessToken) {
                    const verifyAuthToken = await fetch('/api/auth/verifyToken', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            accessToken: accessToken,
                        }),
                    });

                    if (verifyAuthToken.status === 200) {
                        console.log('Privy authenticated?', authenticated);
                        return accessToken;
                    } else {
                        console.log('Request failed', verifyAuthToken.status);
                        return null;
                    }
                } else {
                    console.log("Couldn't get a token");
                    return null;
                }
            } else {
                return await getAccessToken();
            }
        },
        [getAccessToken, authenticated]
    );

    return useMemo(
        () => ({
            isLoading: !ready,
            isAuthenticated: authenticated,
            fetchAccessToken,
        }),
        [authenticated, ready, fetchAccessToken]
    );
}

 export function usePrivyAuth() {
    const { getAccessToken, authenticated, ready } = usePrivy();

    const fetchAccessToken = useCallback(
        async ({ forceRefreshToken = true }: { forceRefreshToken: boolean }) => {
            if (forceRefreshToken) {
                const accessToken = await getAccessToken();
                if (accessToken) {
                    const verifyAuthToken = await fetch('/api/auth/verifyToken', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            accessToken: accessToken,
                        }),
                    });

                    if (verifyAuthToken.status === 200) {
                        console.log('Privy authenticated?', authenticated);
                        return accessToken;
                    } else {
                        console.log('Request failed', verifyAuthToken.status);
                        return null;
                    }
                } else {
                    console.log("Couldn't get a token");
                    return null;
                }
            } else {
                return await getAccessToken();
            }
        },
        [getAccessToken, authenticated]
    );

    return useMemo(
        () => ({
            isLoading: !ready,
            isAuthenticated: authenticated,
            fetchAccessToken,
        }),
        [authenticated, ready, fetchAccessToken]
    );
}

Here, authenticated always returns false even though console.log('Privy authenticated?', authenticated); returns true after I verify the user token. The isLoading: !ready works as well. Any suggestions?

7 replies