Authentication ची एक गोष्ट

मला सिस्टम डिझाइन (system design) खूप आवडते. सॉफ्टवेअर वापरकर्त्यांसाठी उत्तम बनवणारे छोटे निर्णय घेण्याबद्दल विचार करायला मला आवडते.

एक इंजिनिअर म्हणून, मला सुरक्षेची (security) काळजी वाटते. जर सॉफ्टवेअर असुरक्षित असेल किंवा हल्ल्यांमुळे (attacks) आर्थिक नुकसान होत असेल, तर ते निरुपयोगी आहे. मला अशी उत्पादने तयार करायची आहेत जी प्रत्येक वेळी अचूकपणे काम करतील.

मी अलीकडेच एका AI स्टार्टअपसाठी authentication वर काम केले. मी frontend साठी Next.js वापरले. लहान टीम्ससाठी Next.js उत्तम आहे कारण ते frontend आणि backend एकाच codebase मध्ये एकत्र आणते.

या प्रोजेक्ट दरम्यान, मी ब्राउझरमध्ये authentication tokens कसे साठवायचे आणि सुरक्षित कसे ठेवायचे यावर लक्ष केंद्रित केले. याचे समाधान म्हणजे cookies, विशेषतः HttpOnly cookies.

Local Storage ऐवजी cookies का वापरावे?

Local Storage वापरण्यास सोपे आहे, परंतु त्यात एक धोका आहे. JavaScript ते वाचू शकते. यामुळे ते Cross-Site Scripting (XSS) हल्ल्यांना बळी पडू शकते. जर तुमच्या साइटवर एखादा घातक (malicious) स्क्रिप्ट चालला, तर तो वापरकर्त्याचा token चोरू शकतो.

Cookies ही समस्या सोडवतात. तुम्ही cookie मध्ये HttpOnly flag जोडू शकता. हे ब्राउझरला सांगते: "ही cookie फक्त HTTP requests द्वारेच पाठवा. JavaScript ला ती स्पर्श करू देऊ नका."

जर एखाद्या हल्लेखोराने (attacker) JavaScript वापरून cookie वाचण्याचा प्रयत्न केला, तर त्याला काहीही दिसणार नाही. cookie त्यांच्यासाठी अदृश्य राहील, परंतु ब्राउझर तरीही ती तुमच्या सर्व्हरकडे आपोआप पाठवेल.

Cookies अधिक सुरक्षित करण्यासाठी, मी इतर दोन flags वापरतो:

• Secure: यामुळे cookie फक्त HTTPS वरून प्रवास होईल याची खात्री मिळते. • SameSite=Lax: हे Cross-Site Request Forgery (CSRF) हल्ले रोखण्यास मदत करते.

मी हे Next.js सोबत कसे लागू केले:

मला माझे backend (FastAPI) ब्राउझरपासून लपवून ठेवायचे होते. मी server-to-server सेटअप तयार करण्यासाठी Next.js चा proxy म्हणून वापर केला.

  1. वापरकर्ता Next.js Server Action द्वारे लॉग इन करतो.
  2. Server Action कडून FastAPI कडे credentials पाठवले जातात.
  3. FastAPI Next.js सर्व्हरला token परत करते.
  4. Next.js सर्व्हर तो token HttpOnly cookie मध्ये लिहितो.
  5. ब्राउझर cookie साठवतो पण तो वाचू शकत नाही.

जेव्हा वापरकर्त्याला डेटाची आवश्यकता असते, तेव्हा Next.js सर्व्हर cookie वाचतो आणि त्यांच्यासाठी backend शी संवाद साधतो. संवेदनशील (sensitive) token ब्राउझरच्या JavaScript environment ला कधीही स्पर्श करत नाही.

या सेटअपमुळे माझे backend वेगळे (isolated) राहते आणि माझे वापरकर्ते अधिक सुरक्षित राहतात.

तुम्ही तुमच्या Next.js प्रोजेक्ट्समध्ये authentication कसे हाताळता? मला तुमचा दृष्टिकोन ऐकायला नक्कीच आवडेल.

Source: https://dev.to/zikthemaker/an-auth-story-42hf