build(signin): ♿️ Add SSO signin for Sleekplan

apps/builder/package.json

@@ -51,6 +51,7 @@
     "htmlparser2": "^7.2.0",
     "immer": "^9.0.12",
     "js-video-url-parser": "^0.5.1",
+    "jsonwebtoken": "^8.5.1",
     "kbar": "^0.1.0-beta.27",
     "micro": "^9.3.4",
     "micro-cors": "^0.1.1",
@@ -84,6 +85,7 @@
   "devDependencies": {
     "@playwright/test": "^1.19.0",
     "@types/google-spreadsheet": "^3.1.5",
+    "@types/jsonwebtoken": "8.5.1",
     "@types/micro-cors": "^0.1.2",
     "@types/minio": "^7.0.12",
     "@types/node": "^17.0.17",

apps/builder/pages/api/auth/sleekplan.ts

@@ -0,0 +1,31 @@
+import { withSentry } from '@sentry/nextjs'
+import { User } from 'db'
+import { sign } from 'jsonwebtoken'
+import { NextApiRequest, NextApiResponse } from 'next'
+import { getAuthenticatedUser } from 'services/api/utils'
+import { methodNotAllowed, notAuthenticated } from 'utils'
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  if (req.method === 'GET') {
+    const user = await getAuthenticatedUser(req)
+    if (!user) return notAuthenticated(res)
+    const ssoToken = createSSOToken(user)
+    res.redirect(`https://feedback.typebot.io?sso=${ssoToken}`)
+    return
+  }
+  methodNotAllowed(res)
+}
+
+const createSSOToken = (user: User) => {
+  if (!process.env.SLEEKPLAN_SSO_KEY) return
+  const userData = {
+    mail: user.email,
+    id: user.id,
+    name: user.name,
+    img: user.image,
+  }
+
+  return sign(userData, process.env.SLEEKPLAN_SSO_KEY, { algorithm: 'HS256' })
+}
+
+export default withSentry(handler)

apps/builder/pages/typebots.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { Flex, Link, Stack, Text } from '@chakra-ui/layout'
+import { Link, Stack, Text, VStack } from '@chakra-ui/layout'
 import { DashboardHeader } from 'components/dashboard/DashboardHeader'
 import { Seo } from 'components/Seo'
 import { FolderContent } from 'components/dashboard/FolderContent'
@@ -35,8 +35,14 @@ const DashboardPage = () => {
     if (!isReady) return
     const couponCode = query.coupon?.toString()
     const stripeStatus = query.stripe?.toString()
+    const sleekplan = query.sleekplan?.toString()
     const redirectPath = query.redirectPath as string | undefined
 
+    if (sleekplan) {
+      setIsLoading(true)
+      push('/api/auth/sleekplan')
+      return
+    }
     if (stripeStatus === 'success')
       toast({
         title: 'Typebot Pro',
@@ -66,9 +72,10 @@ const DashboardPage = () => {
       <DashboardHeader />
       <TypebotDndContext>
         {isLoading ? (
-          <Flex w="full" justifyContent="center" pt="10">
+          <VStack w="full" justifyContent="center" pt="10" spacing={6}>
+            <Text>You are being redirected...</Text>
             <Spinner />
-          </Flex>
+          </VStack>
         ) : (
           <FolderContent folder={null} />
         )}

yarn.lock

@@ -3971,6 +3971,13 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
+"@types/jsonwebtoken@8.5.1":
+  version "8.5.1"
+  resolved "https://registry.yarnpkg.com/@types/jsonwebtoken/-/jsonwebtoken-8.5.1.tgz#56958cb2d80f6d74352bd2e501a018e2506a8a84"
+  integrity sha512-rNAPdomlIUX0i0cg2+I+Q1wOUr531zHBQ+cV/28PJ39bSPKjahatZZ2LMuhiguETkCgLVzfruw/ZvNMNkKoSzw==
+  dependencies:
+    "@types/node" "*"
+
 "@types/keyv@*":
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/@types/keyv/-/keyv-3.1.3.tgz#1c9aae32872ec1f20dcdaee89a9f3ba88f465e41"