أضف تسجيل الدخول عبر Google إلى أي موقع باستخدام Supabase

مصادقة Supabase الحالية

يضيف هذا الدليل Google كخيار لتسجيل الدخول إلى موقع تعمل فيه مصادقة Supabase بالفعل — إنشاء الحساب وتسجيل الدخول والجلسات. إذا لم يكن موقعك يمتلكها بعد، فأكملها أولًا ثم عُد إلى هنا.

أضف مصادقة المستخدمين إلى أي موقع باستخدام Supabase

يبني إنشاء الحساب وتسجيل الدخول والجلسات والمناطق المحمية باستخدام Supabase.

/video/add-user-authentication-supabase

انسخ Callback URL من Supabase

افتح Supabase

https://supabase.com/dashboard

Your project Authentication Sign In / Providers Google

انسخ Callback URL (for OAuth). يوضع هذا الرابط في Google Cloud، وليس في كود موقعك.

اضبط Google Auth Platform

افتح Google Cloud Console

https://console.cloud.google.com/auth/branding

Your project Google Auth Platform

أضف معلومات تطبيقك في Branding — واختر "External" كـ Audience انشر التطبيق في Audience — أو اتركه في وضع "Testing" وأضف نفسك كمستخدم اختبار أكّد النطاقات الأساسية في Data Access

openid

.../auth/userinfo.email

.../auth/userinfo.profile

أنشئ عميل OAuth

Google Auth Platform Clients Create client

اختر "Web application" أضف موقعك ضمن Authorized JavaScript origins الصق Callback URL الخاص بـ Supabase ضمن Authorized redirect URIs انقر على "Create" انسخ Client ID وClient Secret — يعرض Google السر مرة واحدة فقط

رابط موقعك ← Authorized JavaScript origins

Callback URL من مشروع Supabase الخاص بك ← Authorized redirect URIs

أضف عميل Google إلى Supabase

عُد إلى مزوّد Google في Supabase — نفس علامة التبويب من الخطوة 1.

Your project Authentication Sign In / Providers Google

فعّل Google

الصق Client ID من Google

الصق Client Secret من Google

احفظ

حافظ على سرية Client Secret

يجب أن يبقى Client Secret في Supabase فقط. لا تكشفه أبدًا في كود الواجهة الأمامية أو في متغير بيئة عام.

أضف زر تسجيل الدخول عبر Google

يضيف الذكاء الاصطناعي Google إلى تسجيل الدخول الموجود لديك، دون إعادة بنائه.

أضف "Continue with Google"

يضيف تسجيل الدخول عبر Google إلى مصادقة Supabase الحالية مع الحفاظ على مسار تسجيل الدخول الحالي كما هو، ثم يذكر Redirect URLs التي تحتاجها في Supabase.

Add "Continue with Google" to this project's existing Supabase Authentication. Google is already enabled as a provider in my Supabase project, and the Google Client ID and Client Secret are already saved there. Nothing about Google needs to be configured in code. Before changing anything, inspect the current project: - the existing Supabase client(s) and how they are configured - the sign-in page, and the sign-up page if there is one - any existing auth callback route - how protected pages are guarded - how the session is read, kept in sync, and signed out - whether a profile row is created for new users - whether any signed-in user has private data of their own (for example rows protected by Row Level Security) Preserve this project's existing authentication architecture. Make the smallest focused change that adds Google — do not refactor, rename or restyle unrelated code. WHAT TO DO - Add one "Continue with Google" button to the existing sign-in page, and to the sign-up page if there is one. Match the existing design and components. - Start sign-in with the project's existing Supabase client: supabase.auth.signInWithOAuth({ provider: 'google', options: { redirectTo } }). - Follow this project's own architecture instead of forcing one: - Browser-only app: make sure the page the user returns to picks up the new session through the existing session handling. - PKCE or server-rendered auth (for example @supabase/ssr or Next.js): return through a callback route that exchanges the code for a session with the existing server-side client. Reuse an existing callback route; add one only if none exists, following the project's routing conventions. - redirectTo is a page on THIS website. Build it at runtime from the current site origin, or from the project's existing site URL setting. Never hard-code localhost or a domain. - Never use the Supabase Callback URL (the one ending in /auth/v1/callback) as redirectTo — that URL belongs only in Google Cloud, not in this project's code. - After sign-in, send the user where email/password sign-in already sends them, and keep any existing "return to the page I came from" behavior. - Show a loading state while sign-in starts, and prevent repeated clicks. - If sign-in fails or is cancelled, show an error in the existing style and keep the page usable. - Returning users: the same Google account must reuse the same Supabase user, never create a duplicate. Make any profile creation safe to run more than once. - If a profile row is created for new users, make sure it works for Google users too — they have no password and no sign-up form fields; Google provides their name and picture in the user metadata. - If any signed-in user has private data of their own, preserve the existing data isolation exactly as it is (Row Level Security, policies, user id ownership, server-side checks) for a Google user too. Do not loosen, bypass or duplicate it. - Do not build custom account linking — Supabase already links a Google sign-in to an existing user with the same verified email. KEEP AS IT IS - the existing authentication UI and architecture - email/password sign-in and sign-up, if the project has them - protected routes and their guards - session handling and sign-out - Row Level Security and database policies - environment variables and the existing Supabase client configuration - unrelated pages and design NEVER - rebuild or replace the existing authentication - create a second Supabase client or a second authentication system - add a Google sign-in library or call Google APIs directly - put the Google Client Secret, a Supabase secret key or a service-role key in frontend code - deploy anything Run the production build and fix any errors you introduced. Finish with exactly this summary: GOOGLE LOGIN ADDED - Files changed: <each file, with what changed> - Sign-in flow: <browser / callback route at path> - Return URL: <the exact redirectTo path this code uses> - Supabase Redirect URLs to allow: <each full URL this code uses, one per line — the live site and local development; if the live domain is unknown, the path to add after it> - Private user data: <preserved / not applicable> - Still to do: <nothing, or a short list>

أضف روابط العودة

أضف فقط Redirect URLs التي ذكرها الذكاء الاصطناعي أعلاه.

Your project Authentication URL Configuration Redirect URLs

هذه ليست Callback URL من الخطوة 1 — فذلك الرابط مكانه Google Cloud فقط.

تسجيل الدخول عبر Google يعمل

افتح موقعك، وانقر على "Continue with Google"، واختر حساب Google. تأكد من أنك تعود إلى الموقع وأنت مسجّل الدخول.

يمكنك اختياريًا التحقق من الحساب في:

Your project Authentication Users

إعادة تسجيل الدخول تعمل

سجّل الخروج، ثم سجّل الدخول عبر Google مجددًا. تأكد من أن Supabase يعيد استخدام حسابك الحالي بدلًا من إنشاء حساب مكرر.

المصادقة الحالية ما زالت تعمل

تأكد من أن إضافة Google لم تغيّر أي شيء كان يعمل بالفعل.

تبقى مسجّل الدخول بعد تحديث الصفحة

الصفحات المحمية ما زالت تتطلب تسجيل الدخول

تسجيل الدخول بالبريد الإلكتروني وكلمة المرور ما زال يعمل، إن كان تطبيقك يدعمه

كل مستخدم ما زال يرى بياناته الخاصة فقط

تسجيل الدخول عبر Google يعمل الآن

تتحقق الخطوة الأخيرة من اسم تطبيقك وشعاره ليتعرّف المستخدمون على علامتك التجارية. أما استبدال عنوان مصادقة supabase.co الظاهر فأمر منفصل ويتطلب نطاقًا مخصصًا من Supabase.

موصى به لبيئة الإنتاج

تسجيل الدخول عبر Google يعمل بالفعل. تعرض هذه الخطوة اسم تطبيقك وشعاره الموثّقين عند تسجيل دخول المستخدمين.

أكمل العلامة التجارية لتطبيق Google الخاص بك

افتح Google Auth Platform

https://console.cloud.google.com/auth/branding

Google Auth Platform Branding

App name

App logo

Application home page

Application privacy policy link

Application terms of service link، إن وُجد

Authorized domain

Developer contact information

أضف صفحتي سياسة الخصوصية والشروط إلى أي موقع مبني بالذكاء الاصطناعي

لا توجد لديك سياسة خصوصية أو صفحة شروط بعد؟ أنشئها أولًا.

/video/add-privacy-policy-and-terms-pages-to-any-ai-built-website

تحقّق من نطاقك وعلامتك التجارية

افتح Google Search Console

https://search.google.com/search-console

تحقّق من نطاقك في Google Search Console، إن لم تفعل ذلك بعد عُد إلى صفحة Branding في Google Auth Platform انقر على "Verify Branding"

قد يوافق Google تلقائيًا أو يطلب مراجعة.

انشر وأعد الاختبار

عندما يعرض Google "Ready to publish"، انقر على "Publish branding" افتح موقعك في نافذة تصفح خاصة انقر على "Continue with Google" تأكد من ظهور اسم تطبيقك وشعاره

اختياري: استخدم نطاق مصادقة مخصصًا

ميزة مدفوعة في Supabase — غير مطلوبة لتسجيل الدخول عبر Google. استخدمها للحصول على رابط مصادقة يحمل علامتك التجارية، أو إذا تطلّب تحقق Google نطاق مصادقة تتحكم فيه.

يغيّر التحقق من العلامة التجارية اسم التطبيق والشعار اللذين يعرضهما Google. أما النطاق المخصص من Supabase فيستبدل عنوان المصادقة الافتراضي project-ref.supabase.co بعنوانك الخاص، مثل auth.example.com.

بعد تفعيله، أضف callback URL الخاص به (https://auth.example.com/auth/v1/callback) إلى Authorized redirect URIs في عميل Google الخاص بك.

النطاقات المخصصة في Supabase

https://supabase.com/docs/guides/platform/custom-domains