@rudderjs/auth 4.0.1 → 4.0.2

package/README.md

@@ -172,6 +172,8 @@ The `EloquentUserProvider` auto-wraps ORM model records with these methods (mapp
 
 Ships React views for Login, Register, ForgotPassword, ResetPassword under `views/react/`. `create-rudder-app` vendors them into `app/Views/Auth/` at scaffold time so the app owns the files from day one and can edit them freely.
 
+The views POST credentials with an `X-CSRF-Token` header read via `getCsrfToken()` from `@rudderjs/middleware`, so they work with `CsrfMiddleware` on the web group out of the box. `@rudderjs/middleware` is already a dep of any standard RudderJS app via the bootstrap pattern.
+
 To re-vendor manually (e.g. after upgrading this package):
 
 ```bash

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rudderjs/auth",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "rudderjs": {
     "provider": "AuthProvider",
     "stage": "infrastructure",
@@ -48,10 +48,10 @@
     "@rudderjs/core": "^1.0.0"
   },
   "peerDependencies": {
-    "@rudderjs/session": "^1.0.1",
     "@rudderjs/router": "^1.0.0",
-    "@rudderjs/view": "^1.0.0",
-    "@rudderjs/hash": "^1.0.0"
+    "@rudderjs/hash": "^1.0.0",
+    "@rudderjs/session": "^1.0.2",
+    "@rudderjs/view": "^1.0.0"
   },
   "peerDependenciesMeta": {
     "@rudderjs/hash": {
@@ -73,7 +73,7 @@
     "typescript": "^5.4.0",
     "@rudderjs/hash": "^1.0.0",
     "@rudderjs/router": "^1.0.0",
-    "@rudderjs/session": "^1.0.1",
+    "@rudderjs/session": "^1.0.2",
     "@rudderjs/view": "^1.0.0"
   },
   "author": "Suleiman Shahbari",

package/views/react/ForgotPassword.tsx

@@ -1,5 +1,6 @@
 import '@/index.css'
 import { useState } from 'react'
+import { getCsrfToken } from '@rudderjs/middleware'
 
 // URL this view is served at — see Login.tsx for rationale.
 export const route = '/forgot-password'
@@ -28,7 +29,10 @@ export default function ForgotPassword(props: ForgotPasswordProps) {
     try {
       const res = await fetch(submitUrl, {
         method:  'POST',
-        headers: { 'Content-Type': 'application/json' },
+        headers: {
+          'Content-Type': 'application/json',
+          'X-CSRF-Token': getCsrfToken(),
+        },
         body:    JSON.stringify({ email, redirectTo: resetPasswordUrl }),
       })
       if (res.ok) {

package/views/react/Login.tsx

@@ -1,6 +1,7 @@
 import '@/index.css'
 import { useState } from 'react'
 import { navigate } from 'vike/client/router'
+import { getCsrfToken } from '@rudderjs/middleware'
 
 // URL this view is served at — MUST match the controller route registered
 // by registerAuthRoutes() in the consumer project. If you override
@@ -32,7 +33,10 @@ export default function Login(props: LoginProps) {
     setLoading(true)
     const res = await fetch(submitUrl, {
       method:  'POST',
-      headers: { 'Content-Type': 'application/json' },
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRF-Token': getCsrfToken(),
+      },
       body:    JSON.stringify({ email, password }),
     })
     if (res.ok) {

package/views/react/Register.tsx

@@ -1,6 +1,7 @@
 import '@/index.css'
 import { useState } from 'react'
 import { navigate } from 'vike/client/router'
+import { getCsrfToken } from '@rudderjs/middleware'
 
 // URL this view is served at — see Login.tsx for rationale.
 export const route = '/register'
@@ -28,7 +29,10 @@ export default function Register(props: RegisterProps) {
     setLoading(true)
     const res = await fetch(submitUrl, {
       method:  'POST',
-      headers: { 'Content-Type': 'application/json' },
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRF-Token': getCsrfToken(),
+      },
       body:    JSON.stringify({ name, email, password }),
     })
     if (res.ok) {

package/views/react/ResetPassword.tsx

@@ -1,5 +1,6 @@
 import '@/index.css'
 import { useState, useEffect } from 'react'
+import { getCsrfToken } from '@rudderjs/middleware'
 
 // URL this view is served at — see Login.tsx for rationale.
 export const route = '/reset-password'
@@ -45,7 +46,10 @@ export default function ResetPassword(props: ResetPasswordProps) {
     try {
       const res = await fetch(submitUrl, {
         method:  'POST',
-        headers: { 'Content-Type': 'application/json' },
+        headers: {
+          'Content-Type': 'application/json',
+          'X-CSRF-Token': getCsrfToken(),
+        },
         body:    JSON.stringify({ token, email, newPassword: password }),
       })
       if (res.ok) {