From 5b66c1f98619167bed7002f15bc86779050d6f8c Mon Sep 17 00:00:00 2001
From: Deepak Prabhakara <deepak@boxyhq.com>
Date: Fri, 18 Feb 2022 17:32:12 +0000
Subject: [PATCH] Fix/sso username (#1897)

* username slug should be lowercase

* if logging in via a non-CAL identity provider then show username during onboarding

* type fix

Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
---
 apps/web/pages/api/auth/[...nextauth].tsx |  6 ++++--
 apps/web/pages/getting-started.tsx        | 13 +++++++++----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/apps/web/pages/api/auth/[...nextauth].tsx b/apps/web/pages/api/auth/[...nextauth].tsx
index 93b89b3e..0345d106 100644
--- a/apps/web/pages/api/auth/[...nextauth].tsx
+++ b/apps/web/pages/api/auth/[...nextauth].tsx
@@ -14,6 +14,8 @@ import slugify from "@lib/slugify";
 
 import { GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, IS_GOOGLE_LOGIN_ENABLED } from "@server/lib/constants";
 
+const usernameSlug = (username: string) => slugify(username) + "-" + randomString(6).toLowerCase();
+
 const providers: Provider[] = [
   CredentialsProvider({
     id: "credentials",
@@ -310,7 +312,7 @@ export default NextAuth({
               data: {
                 // Slugify the incoming name and append a few random characters to
                 // prevent conflicts for users with the same name.
-                username: slugify(user.name) + "-" + randomString(6),
+                username: usernameSlug(user.name),
                 emailVerified: new Date(Date.now()),
                 name: user.name,
                 identityProvider: idP,
@@ -332,7 +334,7 @@ export default NextAuth({
           data: {
             // Slugify the incoming name and append a few random characters to
             // prevent conflicts for users with the same name.
-            username: slugify(user.name) + "-" + randomString(6),
+            username: usernameSlug(user.name),
             emailVerified: new Date(Date.now()),
             name: user.name,
             email: user.email,
diff --git a/apps/web/pages/getting-started.tsx b/apps/web/pages/getting-started.tsx
index f489460d..6103aeda 100644
--- a/apps/web/pages/getting-started.tsx
+++ b/apps/web/pages/getting-started.tsx
@@ -1,6 +1,6 @@
 import { ArrowRightIcon } from "@heroicons/react/outline";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Prisma } from "@prisma/client";
+import { Prisma, IdentityProvider } from "@prisma/client";
 import classnames from "classnames";
 import dayjs from "dayjs";
 import localizedFormat from "dayjs/plugin/localizedFormat";
@@ -162,7 +162,11 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
   const [currentStep, setCurrentStep] = useState(0);
   const detectStep = () => {
     let step = 0;
-    const hasSetUserNameOrTimeZone = props.user?.name && props.user?.timeZone && !props.usernameParam;
+    const hasSetUserNameOrTimeZone =
+      props.user?.name &&
+      props.user?.timeZone &&
+      !props.usernameParam &&
+      props.user?.identityProvider === IdentityProvider.CAL;
     if (hasSetUserNameOrTimeZone) {
       step = 1;
     }
@@ -348,7 +352,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
           </div>
           <form className="sm:mx-auto sm:w-full">
             <section className="space-y-8">
-              {props.usernameParam && (
+              {(props.usernameParam || props.user?.identityProvider !== IdentityProvider.CAL) && (
                 <fieldset>
                   <label htmlFor="name" className="block text-sm font-medium text-gray-700">
                     {t("username")}
@@ -360,7 +364,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
                     id="username"
                     data-testid="username"
                     placeholder={t("username")}
-                    defaultValue={props.usernameParam ?? ""}
+                    defaultValue={props.usernameParam ? props.usernameParam : props.user?.username ?? ""}
                     required
                     className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
                   />
@@ -666,6 +670,7 @@ export async function getServerSideProps(context: NextPageContext) {
       bio: true,
       avatar: true,
       timeZone: true,
+      identityProvider: true,
       completedOnboarding: true,
       selectedCalendars: {
         select: {