build(docker): 🧱 Improve runtime environment

apps/builder/components/auth/SocialLoginButtons.tsx

@@ -1,13 +1,24 @@
 import { Stack, Button } from '@chakra-ui/react'
 import { GithubIcon } from 'assets/icons'
-import { signIn, useSession } from 'next-auth/react'
+import {
+  ClientSafeProvider,
+  LiteralUnion,
+  signIn,
+  useSession,
+} from 'next-auth/react'
 import { useRouter } from 'next/router'
 import React from 'react'
 import { stringify } from 'qs'
 import { FacebookLogo, GoogleLogo, GitlabLogo } from 'assets/logos'
-import { isEmpty } from 'utils'
+import { BuiltInProviderType } from 'next-auth/providers'
 
-export const SocialLoginButtons = () => {
+type Props = {
+  providers:
+    | Record<LiteralUnion<BuiltInProviderType, string>, ClientSafeProvider>
+    | undefined
+}
+
+export const SocialLoginButtons = ({ providers }: Props) => {
   const { query } = useRouter()
   const { status } = useSession()
 
@@ -33,7 +44,7 @@ export const SocialLoginButtons = () => {
 
   return (
     <Stack>
-      {!isEmpty(process.env.NEXT_PUBLIC_GITHUB_CLIENT_ID) && (
+      {providers?.github && (
         <Button
           leftIcon={<GithubIcon />}
           onClick={handleGitHubClick}
@@ -44,7 +55,7 @@ export const SocialLoginButtons = () => {
           Continue with GitHub
         </Button>
       )}
-      {!isEmpty(process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID) && (
+      {providers?.google && (
         <Button
           leftIcon={<GoogleLogo />}
           onClick={handleGoogleClick}
@@ -55,7 +66,7 @@ export const SocialLoginButtons = () => {
           Continue with Google
         </Button>
       )}
-      {!isEmpty(process.env.NEXT_PUBLIC_FACEBOOK_CLIENT_ID) && (
+      {providers?.facebook && (
         <Button
           leftIcon={<FacebookLogo />}
           onClick={handleFacebookClick}
@@ -66,7 +77,7 @@ export const SocialLoginButtons = () => {
           Continue with Facebook
         </Button>
       )}
-      {!isEmpty(process.env.NEXT_PUBLIC_GITLAB_CLIENT_ID) && (
+      {providers?.gitlab && (
         <Button
           leftIcon={<GitlabLogo />}
           onClick={handleGitlabClick}
@@ -74,10 +85,7 @@ export const SocialLoginButtons = () => {
           isLoading={['loading', 'authenticated'].includes(status)}
           variant="outline"
         >
-          Continue with{' '}
-          {isEmpty(process.env.NEXT_PUBLIC_GITLAB_NAME)
-            ? 'GitLab'
-            : process.env.NEXT_PUBLIC_GITLAB_NAME}
+          Continue with {providers.gitlab.name}
         </Button>
       )}
     </Stack>