Back
When `createEmailPasswordSession` using the react-native library, `this` is `undefined` in `sdk.js`
I'm calling appwrite.account.createEmailPasswordSession
in my react-native app, but i keep getting
cannot read property 'client' of undefined thrown in sdk.js on line 1199:
const uri = new URL(this.client.config.endpoint + apiPath);
Could someone please help me debug? I've just been following these docs: https://appwrite.io/docs/quick-starts/react-native
TL;DR
Issue with `appwrite.account.createEmailPasswordSession` due to `this` being undefined in `sdk.js`.
**Solution**: Ensure the proper binding of `this` for `createEmailPasswordSession` function call in `sdk.js`.
User planning to switch to Supabase for now, but might revisit AppWrite in the future. Full code:
appwrite-service.ts
TypeScript
import { Account, Client, ID } from "react-native-appwrite";
const client = new Client();
if (
!process.env.EXPO_PUBLIC_APPWRITE_ENDPOINT ||
!process.env.EXPO_PUBLIC_APPWRITE_APP_ID
) {
throw new Error("Missing environment variables");
}
client.setEndpoint(process.env.EXPO_PUBLIC_APPWRITE_ENDPOINT);
client.setProject(process.env.EXPO_PUBLIC_APPWRITE_APP_ID);
client.setPlatform("app.jordy.rozemarijn");
const account = new Account(client);
console.log(account);
export const appwrite = {
client,
account,
ID,
};
AuthContext.tsx
TypeScript
import {
createContext,
ReactNode,
useContext,
useEffect,
useState,
} from "react";
import { appwrite } from "../lib/appwrite-service";
import { Models } from "react-native-appwrite";
export type AuthContextValue = {
signIn: typeof appwrite.account.createEmailPasswordSession;
signUp: (
email: string,
password: string
) => ReturnType<typeof appwrite.account.create>;
signOut: typeof appwrite.account.deleteSession;
session: Models.Session | null;
isLoading: boolean;
};
const AuthContext = createContext<AuthContextValue | undefined>(undefined);
export function SessionProvider(props: { children: ReactNode }) {
const [session, setSession] = useState<Models.Session | null>(null);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
(async () => {
try {
const session = await appwrite.account.getSession("current");
setSession(session);
} catch (error) {
console.error(error);
setSession(null);
}
setIsLoading(false);
})();
}, []);
return (
<AuthContext.Provider
value={{
signIn: appwrite.account.createEmailPasswordSession,
signUp: (email, password) =>
appwrite.account.create(appwrite.ID.unique(), email, password),
signOut: appwrite.account.deleteSession,
session,
isLoading,
}}
>
{props.children}
</AuthContext.Provider>
);
}
export function useSession() {
const value = useContext(AuthContext);
if (!value) {
throw new Error("useSession must be wrapped in a <SessionProvider />");
}
return value;
}
Moving to Supabase for now given that this was the first thing I wanted to do and it immediately failed, but hoping to try AppWrite again in the future π
