Usage
In this section, you will find detailed instructions on how to integrate FullAuth into your Next.js 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: (client side only)
app/page.tsx
'use client';
import { signIn } from '@fullauth/react';
export default function Home() {
return (
<div>
<button
onClick={async () =>
await signIn('credentials', {
credentials: {
email: data.email,
password: data.password,
},
// enable redirection after signining (default to true)
redirect: true,
// the url to redirect to after signing in
redirectUrl: `${process.env.NEXT_PUBLIC_BASEURL}/`
})
}
></button>
</div>
);
}signOut:
use signOut() method to delete the session: (client side only)
app/page.tsx
'use client';
import { singOut } from '@fullauth/react';
export default function Home() {
return (
<div>
<button onClick={async () => await signOut()}></button>
</div>
);
}useSession:
To access the session object in a client component, you can use useSession() hook:
app/page.tsx
'use client';
import { useSession } from '@fullauth/react';
export default function Home() {
const { session } = useSession();
console.log('session: ', session);
return (
/// your page code here
);
}update:
use udpate() method to update the session: (client side only)
app/page.tsx
'use client';
import { singOut } from '@fullauth/react';
export default function Home() {
return (
<div>
<button
onClick={async () =>
await update({
name: 'lazydev',
})
}
></button>
</div>
);
}getSession:
To access the session object in a server component (server-side), you can use geetSession() method:
app/page.tsx
import { getSession } from '@fullauth/next/helpers';
import { authOptions } from '../api/auth/[...fullauth]/route';
const Server = () => {
const session = getSession(authOptions);
return (
<div>
<div>
<p>user: {session?.user?.name}</p>
</div>
</div>
);
};
export default Server;getSession() has two overeloads:
app/page.tsx
function getServerSession(options: AuthOptions): Promise<Session | null>;
function getServerSession(
req: Request | NextRequest,
options: AuthOptions
): Promise<Session | null>;The first overload of getSession (passing the AuthOptions only) is the default implementation when you only have web apps, while the second overload is particularly useful when FullAuth needs to extract authentication-related information from the request object (ex: headers). Especially when you have a react native app using the same backend.