Usage
In this section, you will find detailed instructions on how to integrate FullAuth into your React Native App. Follow the steps below to set up authentication, manage user sessions, and utilize the key features of FullAuth.
signIn:
use signIn() method to create a session for the user:
screen.tsx
import { signIn } from '@fullauth/react-native';
export default function Screen() {
return (
<View>
<Pressable
onPress={async () =>
await signIn({
baseUrl: "your-backend-url",
provider: 'credentials',
credentials: {
email: 'test@test.com',
password: 'test12345',
},
})
}
>
<Text>Sign In</Text>
</Pressable>
</View>
);
}signOut:
use signOut() method to delete the session:
screen.tsx
import { signOut } from '@fullauth/react-native';
export default function Screen() {
return (
<View>
<Pressable
onPress={async () => await signOut({ baseUrl: "your-backend-url"})}
>
<Text>Sign Out</Text>
</Pressable>
</View>
);
}useSession:
To access the session object in a component, you can use useSession() hook:
screen.tsx
import { useSession } from '@fullauth/react-native';
export default function Screen() {
const { session } = useSession();
console.log('session: ', session);
return (
/// your page code here
);
}update:
use udpate() method to update the session:
screen.tsx
import { singOut } from '@fullauth/react';
export default function Screen() {
return (
<View>
<Pressable
onPress={async () =>
await update({
name: 'lazydev',
})
}
>
<Text>Update</Text>
</Pressable>
</View>
);
}authHeaders:
To verify user idendity on the backend, we must add the authHeaders give us access to the session object on the backend when calling getSession() :
fetch:
screen.tsx
import { authHeaders } from '@fullauth/react-native';
await fetch(`${process.env.EXPO_PUBLIC_FULLAUTH_URL}/your/api/route`, {
method: 'POST',
headers: {
...(await authHeaders()),
},
body: JSON.stringify(data)
})trpc:
If you are using trpc, you can add authHeaders to trpcClient in your TrpcProvider as below:
TrpcProvder.tsx
import { authHeaders } from '@fullauth/react-native';
export default function TrpcProvider({
children,
}: {
children: React.ReactNode;
}) {
const [queryClient] = useState(() => new QueryClient({}));
const [trpcClient] = useState(() =>
trpc.createClient({
transformer: superjson,
links: [
httpBatchLink({
url: `your-server-url/api/trpc`,
headers: {
...authHeaders,
},
}),
],
})
);
return (
<trpc.Provider client={trpcClient} queryClient={queryClient}>
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
</trpc.Provider>
);
}Then in you backend, make sure to add the request object to getSession() method to access those headers:
Next Route Handler:
route.ts
import { getSession } from '@fullauth/next/helpers';
const handler = async (req: Request) => {
try {
const session = await getSession(req, authOptions);
if (!session.user) {
return NextResponse.json({ ok: false, message: 'Unauthorised' });
}
// you code here
return NextResponse.json({ ok: true, imgData: imgData.data });
} catch (error: any) {
return NextResponse.json({ ok: false, message: error.message });
}
};
export { handler as POST };Trpc Context:
context.ts
import { getSession } from '@fullauth/next/helpers';
import { FetchCreateContextFnOptions } from '@trpc/server/adapters/fetch';
export const createContext = async (opts: FetchCreateContextFnOptions) => {
const session = await getSession(opts?.req, authOptions);
return {
session,
};
};
export type Context = inferAsyncReturnType<typeof createContext>;Usefull Links