Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:framework:nextjs:nextauth [2025/03/19 09:03] – jcheron
+++ web:framework:nextjs:nextauth [2025/08/12 02:35] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 10: / Ligne 10: @@
 ===== Configuration =====
-<sxh;title:src/auth.ts>
+<sxh typescript;title:src/auth.ts>
 import NextAuth from "next-auth";
 import CredentialsProvider from "next-auth/providers/credentials";
@@ Ligne 130: / Ligne 130: @@
 export const {handlers, auth, signIn, signOut} = NextAuth(authConfig);
+</sxh>
+===== Route api =====
+Toutes les requêtes NextAuth passeront par cette route : ''src/app/api/auth/[...nextauth]/route.tsx''
+<sxh typescript>
+import {handlers} from "@/auth";
+export const {GET, POST} = handlers;
+</sxh>
+===== Lib =====
+Fichier utilitaire pour simplifier connexion et déconnexion dans ''src/lib/actions.ts'':
+<sxh typescript>
+'use server';
+import {signIn, signOut} from "@/auth";
+interface LoginFormValues {
+    username: string;
+    password: string;
+    rememberMe?: boolean;
+};
+export const submitLogin = async (formData: LoginFormValues): Promise<any> => {
+    await signIn('credentials', {...formData, redirectTo: '/', redirect: true});
+};
+export const submitLogout = async () => {
+    await signOut({redirect: true, redirectTo: '/logout'});
+};
+</sxh>
+===== LoginForm =====
+Exemple de composant pour le login :
+<sxh typescript>
+'use client';
+import {Button, Checkbox, Form, Input} from "antd";
+import {submitLogin} from "@/lib/actions";
+export default function SignInComponent(){
+    const onFinish = async (values: any) => {
+        await submitLogin(values);
+    };
+    const onFinishFailed = (errorInfo: any) => {
+        console.log('Failed:', errorInfo);
+    };
+    return
+     <div>
+         <Form
+             name="basic"
+             labelCol={{ span: 8 }}
+             wrapperCol={{ span: 16 }}
+             style={{ maxWidth: 600 }}
+             initialValues={{ remember: true }}
+             onFinish={onFinish}
+             onFinishFailed={onFinishFailed}
+             autoComplete="off"
+         >
+             <Form.Item
+                 label="Username"
+                 name="username"
+                 rules={[{ required: true, message: 'Please input your username!' }]}
+             >
+                 <Input />
+             </Form.Item>
+             <Form.Item
+                 label="Password"
+                 name="password"
+                 rules={[{ required: true, message: 'Please input your password!' }]}
+             >
+                 <Input.Password />
+             </Form.Item>
+             <Form.Item name="remember" valuePropName="checked" label={null}>
+                 <Checkbox>Remember me</Checkbox>
+             </Form.Item>
+             <Form.Item label={null}>
+                 <Button type="primary" htmlType="submit">
+                     Submit
+                 </Button>
+             </Form.Item>
+         </Form>
+     </div>
+}
+</sxh>
+===== Configuration =====
+Dans le fichier ''.env'' ou ''.env.local'', définir la variable ''NEXTAUTH_URL'':
+<sxh env>
+NEXTAUTH_URL=http://127.0.0.1:3000
+</sxh>
+Génération du secret pour encodage/décodage JWT :
+<sxh bash>
+npx auth secret
+</sxh>
+Le **secret** est généré et inséré dans le fichier ''.env.local''.
+===== Usage =====
+Accès à la session nextAuth :
+==== Côté serveur ====
+<sxh ts;gutter:false>
+import {auth} from "@/auth";
+const session= await auth();
+console.log(session.user); //user connecté
+</sxh>
+==== Côté client ====
+<sxh ts;gutter:false>
+'use client';
+import {useSession} from "next-auth/react";
+const userData=useSession();
+console.log(userData.data?.user); //user connecté
 </sxh>