Différences

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

--- web:framework:nextjs:nextauth [2025/03/19 09:07] – jcheron
+++ web:framework:nextjs:nextauth [2025/08/12 02:35] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 135: / Ligne 135: @@
 ===== Route api =====
-Toutes les requêtes NextAuth passeront par cette route :
+Toutes les requêtes NextAuth passeront par cette route : ''src/app/api/auth/[...nextauth]/route.tsx''
 <sxh typescript>
@@ Ligne 144: / Ligne 144: @@
 ===== Lib =====
-Fichier utilitaire pour simplifier connexion et déconnexion :
+Fichier utilitaire pour simplifier connexion et déconnexion dans ''src/lib/actions.ts'':
 <sxh typescript>
@@ Ligne 164: / Ligne 164: @@
 };
 </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>