diff --git a/src/views/setting/tabs/auth.tsx b/src/views/setting/tabs/auth.tsx
index c7ed59792..2e3139fbc 100644
--- a/src/views/setting/tabs/auth.tsx
+++ b/src/views/setting/tabs/auth.tsx
@@ -38,7 +38,7 @@ import {
   useInjectOauthData,
   useProvideOauthData,
 } from './providers/oauth'
-import { GitHubProvider } from './sections/oauth'
+import { GitHubProvider, GoogleProvider } from './sections/oauth'
 
 export const TabAuth = defineComponent({
   setup() {
@@ -283,6 +283,7 @@ const Oauth = defineComponent(() => {
       <NH2 class={'mb-0'}>OAuth</NH2>
       <div class={'mt-8 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3'}>
         <GitHubProvider />
+        <GoogleProvider />
       </div>
     </NLayoutContent>
   )
diff --git a/src/views/setting/tabs/sections/oauth.tsx b/src/views/setting/tabs/sections/oauth.tsx
index f61910f5c..71bf01002 100644
--- a/src/views/setting/tabs/sections/oauth.tsx
+++ b/src/views/setting/tabs/sections/oauth.tsx
@@ -8,6 +8,7 @@ import {
   NP,
   NSwitch,
 } from 'naive-ui'
+import type { BuiltInProviderType } from '@auth/core/providers'
 import type { FormInst } from 'naive-ui/lib'
 
 import { RESTManager } from '~/utils'
@@ -15,127 +16,141 @@ import { signIn } from '~/utils/authjs'
 
 import { useInjectOauthData } from '../providers/oauth'
 
-export const GitHubProvider = defineComponent({
-  setup() {
-    const handleValidate = async () => {
-      await signIn('github', { callbackUrl: `${location.href}?validate=true` })
-    }
+export const createProvideSectionComponent = (
+  type: BuiltInProviderType,
+  options: {
+    name: string
+  },
+) =>
+  defineComponent({
+    setup() {
+      const handleValidate = async () => {
+        await signIn(type, {
+          callbackUrl: `${location.href}?validate=true`,
+        })
+      }
 
-    const oauthData = useInjectOauthData()
-    const formValueRef = ref({
-      clientId: '',
-      secret: '',
-    })
-    const isEnabled = ref(false)
+      const oauthData = useInjectOauthData()
+      const formValueRef = ref({
+        clientId: '',
+        secret: '',
+      })
+      const isEnabled = ref(false)
 
-    watchEffect(() => {
-      if (oauthData.value.github === undefined) return
-      const { clientId, enabled } = oauthData.value.github
-      isEnabled.value = enabled
-      formValueRef.value.clientId = clientId
-    })
+      watchEffect(() => {
+        if (oauthData.value[type] === undefined) return
+        const { clientId, enabled } = oauthData.value[type]
+        isEnabled.value = enabled
+        formValueRef.value.clientId = clientId
+      })
 
-    const formRef = ref<null | FormInst>(null)
-    const rules = {
-      clientId: [{ required: true, message: 'Client Id 不能为空' }],
-      secret: [{ required: true, message: 'Client Secret 不能为空' }],
-    }
+      const formRef = ref<null | FormInst>(null)
+      const rules = {
+        clientId: [{ required: true, message: 'Client Id 不能为空' }],
+        secret: [{ required: true, message: 'Client Secret 不能为空' }],
+      }
 
-    const handleSave = async () => {
-      await formRef.value?.validate()
+      const handleSave = async () => {
+        await formRef.value?.validate()
 
-      const type = 'github'
-      RESTManager.api.options('oauth').patch({
-        data: {
-          providers: [
-            {
-              type,
-              enabled: true,
+        RESTManager.api.options('oauth').patch({
+          data: {
+            providers: [
+              {
+                type,
+                enabled: isEnabled.value,
+              },
+            ],
+            secrets: {
+              [type]: {
+                clientSecret: formValueRef.value.secret,
+              },
             },
-          ],
-          secrets: {
-            [type]: {
-              clientSecret: formValueRef.value.secret,
+            public: {
+              [type]: {
+                clientId: formValueRef.value.clientId,
+              },
             },
           },
-          public: {
-            [type]: {
-              clientId: formValueRef.value.clientId,
-            },
-          },
-        },
-      })
-    }
+        })
+      }
 
-    return () => (
-      <NCard title={'GitHub'}>
-        {{
-          default() {
-            return (
-              <NForm model={formValueRef.value} ref={formRef} rules={rules}>
-                <NFormItem label="Client Id" path="clientId" required>
-                  <NInput
-                    value={formValueRef.value.clientId}
-                    onUpdateValue={(v) => {
-                      formValueRef.value.clientId = v
-                    }}
-                  />
-                </NFormItem>
+      return () => (
+        <NCard title={options.name}>
+          {{
+            default() {
+              return (
+                <NForm model={formValueRef.value} ref={formRef} rules={rules}>
+                  <NFormItem label="Client Id" path="clientId" required>
+                    <NInput
+                      value={formValueRef.value.clientId}
+                      onUpdateValue={(v) => {
+                        formValueRef.value.clientId = v
+                      }}
+                    />
+                  </NFormItem>
 
-                <NFormItem label="Client Secret" required path="secret">
-                  <NInput
-                    showPasswordToggle
-                    type="password"
-                    value={formValueRef.value.secret}
-                    onUpdateValue={(v) => {
-                      formValueRef.value.secret = v
-                    }}
-                  />
-                </NFormItem>
+                  <NFormItem label="Client Secret" required path="secret">
+                    <NInput
+                      showPasswordToggle
+                      type="password"
+                      value={formValueRef.value.secret}
+                      onUpdateValue={(v) => {
+                        formValueRef.value.secret = v
+                      }}
+                    />
+                  </NFormItem>
 
-                <NP class={'text-sm'}>
-                  请在 GitHub Developer Settings 中创建 OAuth App
-                  <br /> Callback URL 填写{' '}
-                  <NButton
-                    onClick={() => {
-                      navigator.clipboard.writeText(
-                        `${RESTManager.endpoint}/auth/callback/github`,
-                      )
-                      message.success('已复制到剪贴板')
-                    }}
-                    text
-                  >
-                    {RESTManager.endpoint}/auth/callback/github
-                  </NButton>
-                </NP>
-              </NForm>
-            )
-          },
-          action() {
-            return (
-              <div class={'flex justify-between'}>
-                <label class={'flex items-center gap-2'}>
-                  启用
-                  <NSwitch
-                    value={isEnabled.value}
-                    onUpdateValue={(v) => {
-                      isEnabled.value = v
-                    }}
-                  />
-                </label>
-                <NButtonGroup>
-                  <NButton onClick={handleValidate} type="tertiary" round>
-                    验证
-                  </NButton>
-                  <NButton onClick={handleSave} type="primary" round>
-                    保存
-                  </NButton>
-                </NButtonGroup>
-              </div>
-            )
-          },
-        }}
-      </NCard>
-    )
-  },
+                  <NP class={'text-sm'}>
+                    <br /> Callback URL 填写{' '}
+                    <NButton
+                      onClick={() => {
+                        navigator.clipboard.writeText(
+                          `${RESTManager.endpoint}/auth/callback/${type}`,
+                        )
+                        message.success('已复制到剪贴板')
+                      }}
+                      text
+                    >
+                      {RESTManager.endpoint}/auth/callback/{type}
+                    </NButton>
+                  </NP>
+                </NForm>
+              )
+            },
+            action() {
+              return (
+                <div class={'flex justify-between'}>
+                  <label class={'flex items-center gap-2'}>
+                    启用
+                    <NSwitch
+                      value={isEnabled.value}
+                      onUpdateValue={(v) => {
+                        isEnabled.value = v
+                      }}
+                    />
+                  </label>
+                  <NButtonGroup>
+                    <NButton onClick={handleValidate} type="tertiary" round>
+                      验证
+                    </NButton>
+                    <NButton onClick={handleSave} type="primary" round>
+                      保存
+                    </NButton>
+                  </NButtonGroup>
+                </div>
+              )
+            },
+          }}
+        </NCard>
+      )
+    },
+  })
+
+export const GitHubProvider = createProvideSectionComponent('github', {
+  name: 'GitHub',
+})
+
+export const GoogleProvider = createProvideSectionComponent('google', {
+  name: 'Google',
 })