zias/stats
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feature(auth): replace clerk.com with custom auth (#103)

Browse Source 
* feature(auth): replace clerk.com with custom auth

* minor fixes

* remove notification preferences

* decrease live events interval

fix(api): cookies..

# Conflicts:
#	.gitignore
#	apps/api/src/index.ts
#	apps/dashboard/src/app/providers.tsx
#	packages/trpc/src/trpc.ts
This commit is contained in:
Carl-Gerhard Lindesvärd
2024-12-18 21:30:39 +01:00
committed by Carl-Gerhard Lindesvärd
parent f28802b1c2
commit d31d9924a5
151 changed files with 18484 additions and 12853 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-project-selector.tsx
View File

@@ -24,14 +24,14 @@ import { usePathname, useRouter } from 'next/navigation';
import { useState } from 'react';
import type {
getCurrentOrganizations,
getOrganizations,
getProjectsByOrganizationId,
} from '@openpanel/db';
import Link from 'next/link';
interface LayoutProjectSelectorProps {
projects: Awaited<ReturnType<typeof getProjectsByOrganizationId>>;
organizations?: Awaited<ReturnType<typeof getCurrentOrganizations>>;
organizations?: Awaited<ReturnType<typeof getOrganizations>>;
align?: 'start' | 'end';
}
export default function LayoutProjectSelector({

10
apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout.tsx
View File

@@ -1,11 +1,12 @@
import { FullPageEmptyState } from '@/components/full-page-empty-state';
import {
getCurrentOrganizations,
getCurrentProjects,
getDashboardsByProjectId,
getOrganizations,
getProjects,
} from '@openpanel/db';
import { auth } from '@openpanel/auth/nextjs';
import LayoutContent from './layout-content';
import { LayoutSidebar } from './layout-sidebar';
import SideEffects from './side-effects';
@@ -22,9 +23,10 @@ export default async function AppLayout({
children,
params: { organizationSlug: organizationId, projectId },
}: AppLayoutProps) {
const { userId } = await auth();
const [organizations, projects, dashboards] = await Promise.all([
getCurrentOrganizations(),
getCurrentProjects(organizationId),
getOrganizations(userId),
getProjects({ organizationId, userId }),
getDashboardsByProjectId(projectId),
]);

194
apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/invites/create-invite.tsx
View File

@@ -48,101 +48,137 @@ export default function CreateInvite({ projects }: Props) {
const mutation = api.organization.inviteUser.useMutation({
onSuccess() {
toast('User invited!', {
description: 'The user has been invited to the organization.',
});
toast.success('User has been invited');
reset();
closeSheet();
router.refresh();
},
onError() {
toast.error('Failed to invite user');
onError(error) {
toast.error('Failed to invite user', {
description: error.message,
});
},
});
return (
<Sheet>
<Sheet onOpenChange={() => mutation.reset()}>
<SheetTrigger asChild>
<Button icon={PlusIcon}>Invite user</Button>
</SheetTrigger>
<SheetContent>
<SheetHeader>
<div>
<SheetTitle>Invite a user</SheetTitle>
<SheetDescription>
Invite users to your organization. They will recieve an email will
instructions.
</SheetDescription>
{mutation.isSuccess ? (
<SheetContent>
<SheetHeader>
<SheetTitle>User has been invited</SheetTitle>
</SheetHeader>
<div className="prose">
{mutation.data.type === 'is_member' ? (
<>
<p>
Since the user already has an account we have added him/her to
your organization. This means you will not see this user in
the list of invites.
</p>
<p>We have also notified the user by email about this.</p>
</>
) : (
<p>
We have sent an email with instructions to join the
organization.
</p>
)}
<div className="row gap-4 mt-8">
<Button onClick={() => mutation.reset()}>
Invite another user
</Button>
<Button variant="outline" onClick={() => closeSheet()}>
Close
</Button>
</div>
</div>
</SheetHeader>
<form
onSubmit={handleSubmit((values) => mutation.mutate(values))}
className="flex flex-col gap-8"
>
<InputWithLabel
className="w-full max-w-sm"
label="Email"
error={formState.errors.email?.message}
placeholder="Who do you want to invite?"
{...register('email')}
/>
<div>
<Label>What role?</Label>
</SheetContent>
) : (
<SheetContent>
<SheetHeader>
<div>
<SheetTitle>Invite a user</SheetTitle>
<SheetDescription>
Invite users to your organization. They will recieve an email
will instructions.
</SheetDescription>
</div>
</SheetHeader>
<form
onSubmit={handleSubmit((values) => mutation.mutate(values))}
className="flex flex-col gap-8"
>
<InputWithLabel
className="w-full max-w-sm"
label="Email"
error={formState.errors.email?.message}
placeholder="Who do you want to invite?"
{...register('email')}
/>
<div>
<Label>What role?</Label>
<Controller
name="role"
control={control}
render={({ field }) => (
<RadioGroup
defaultValue={field.value}
onChange={field.onChange}
ref={field.ref}
onBlur={field.onBlur}
className="flex gap-4"
>
<div className="flex items-center gap-2">
<RadioGroupItem value="org:member" id="member" />
<Label className="mb-0" htmlFor="member">
Member
</Label>
</div>
<div className="flex items-center gap-2">
<RadioGroupItem value="org:admin" id="admin" />
<Label className="mb-0" htmlFor="admin">
Admin
</Label>
</div>
</RadioGroup>
)}
/>
</div>
<Controller
name="role"
name="access"
control={control}
render={({ field }) => (
<RadioGroup
defaultValue={field.value}
onChange={field.onChange}
ref={field.ref}
onBlur={field.onBlur}
className="flex gap-4"
>
<div className="flex items-center gap-2">
<RadioGroupItem value="org:member" id="member" />
<Label className="mb-0" htmlFor="member">
Member
</Label>
</div>
<div className="flex items-center gap-2">
<RadioGroupItem value="org:admin" id="admin" />
<Label className="mb-0" htmlFor="admin">
Admin
</Label>
</div>
</RadioGroup>
<div>
<Label>Restrict access</Label>
<ComboboxAdvanced
placeholder="Restrict access to projects"
value={field.value}
onChange={field.onChange}
items={projects.map((item) => ({
label: item.name,
value: item.id,
}))}
/>
<p className="mt-1 text-sm text-muted-foreground">
Leave empty to give access to all projects
</p>
</div>
)}
/>
</div>
<Controller
name="access"
control={control}
render={({ field }) => (
<div>
<Label>Restrict access</Label>
<ComboboxAdvanced
placeholder="Restrict access to projects"
value={field.value}
onChange={field.onChange}
items={projects.map((item) => ({
label: item.name,
value: item.id,
}))}
/>
<p className="mt-1 text-sm text-muted-foreground">
Leave empty to give access to all projects
</p>
</div>
)}
/>
<SheetFooter>
<Button icon={SendIcon} type="submit" loading={mutation.isLoading}>
Invite user
</Button>
</SheetFooter>
</form>
</SheetContent>
<SheetFooter>
<Button
icon={SendIcon}
type="submit"
loading={mutation.isLoading}
>
Invite user
</Button>
</SheetFooter>
</form>
</SheetContent>
)}
</Sheet>
);
}

4
apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/page.tsx
View File

@@ -1,11 +1,11 @@
import { FullPageEmptyState } from '@/components/full-page-empty-state';
import { PageTabs, PageTabsLink } from '@/components/page-tabs';
import { Padding } from '@/components/ui/padding';
import { auth } from '@clerk/nextjs/server';
import { ShieldAlertIcon } from 'lucide-react';
import { notFound } from 'next/navigation';
import { parseAsStringEnum } from 'nuqs/server';
import { auth } from '@openpanel/auth/nextjs';
import { db } from '@openpanel/db';
import EditOrganization from './edit-organization';
@@ -26,7 +26,7 @@ export default async function Page({
const tab = parseAsStringEnum(['org', 'members', 'invites'])
.withDefault('org')
.parseServerSide(searchParams.tab);
const session = auth();
const session = await auth();
const organization = await db.organization.findUnique({
where: {
id: organizationId,

5
apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/profile/page.tsx
View File

@@ -1,12 +1,11 @@
import { Padding } from '@/components/ui/padding';
import { auth } from '@clerk/nextjs/server';
import { auth } from '@openpanel/auth/nextjs';
import { getUserById } from '@openpanel/db';
import EditProfile from './edit-profile';
export default async function Page() {
const { userId } = auth();
const { userId } = await auth();
const profile = await getUserById(userId!);
return (

28
apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/side-effects.tsx
View File

@@ -1,39 +1,11 @@
'use client';
import { pushModal, useOnPushModal } from '@/modals';
import { useUser } from '@clerk/nextjs';
import { differenceInDays } from 'date-fns';
import { useEffect } from 'react';
import { useOpenPanel } from '@openpanel/nextjs';
export default function SideEffects() {
const op = useOpenPanel();
const { user } = useUser();
const accountAgeInDays = differenceInDays(
new Date(),
user?.createdAt || new Date(),
);
useOnPushModal('Testimonial', (open) => {
if (!open) {
user?.update({
unsafeMetadata: {
...user.unsafeMetadata,
testimonial: new Date().toISOString(),
},
});
}
});
const showTestimonial =
user && !user.unsafeMetadata.testimonial && accountAgeInDays > 7;
useEffect(() => {
if (showTestimonial) {
pushModal('Testimonial');
op.track('testimonials_shown');
}
}, [showTestimonial]);
return null;
}

10
apps/dashboard/src/app/(app)/[organizationSlug]/page.tsx
View File

@@ -4,7 +4,8 @@ import ProjectCard from '@/components/projects/project-card';
import { redirect } from 'next/navigation';
import SettingsToggle from '@/components/settings-toggle';
import { getCurrentOrganizations, getCurrentProjects } from '@openpanel/db';
import { auth } from '@openpanel/auth/nextjs';
import { getOrganizations, getProjects } from '@openpanel/db';
import LayoutProjectSelector from './[projectId]/layout-project-selector';
interface PageProps {
@@ -16,9 +17,10 @@ interface PageProps {
export default async function Page({
params: { organizationSlug: organizationId },
}: PageProps) {
const { userId } = await auth();
const [organizations, projects] = await Promise.all([
getCurrentOrganizations(),
getCurrentProjects(organizationId),
getOrganizations(userId),
getProjects({ organizationId, userId }),
]);
const organization = organizations.find((org) => org.id === organizationId);
@@ -32,7 +34,7 @@ export default async function Page({
}
if (projects.length === 0) {
return redirect('/onboarding');
return redirect('/onboarding/project');
}
if (projects.length === 1 && projects[0]) {

8
apps/dashboard/src/app/(app)/page.tsx
View File

@@ -1,13 +1,15 @@
import { redirect } from 'next/navigation';
import { getCurrentOrganizations } from '@openpanel/db';
import { auth } from '@openpanel/auth/nextjs';
import { getOrganizations } from '@openpanel/db';
export default async function Page() {
const organizations = await getCurrentOrganizations();
const { userId } = await auth();
const organizations = await getOrganizations(userId);
if (organizations.length > 0) {
return redirect(`/${organizations[0]?.id}`);
}
return redirect('/onboarding');
return redirect('/onboarding/project');
}

2
apps/dashboard/src/app/(auth)/layout.tsx
View File

@@ -12,7 +12,7 @@ const Page = ({ children }: Props) => {
<div className="min-h-screen border-r border-r-background bg-gradient-to-r from-background to-def-200 max-md:hidden">
<LiveEventsServer />
</div>
<div className="min-h-screen">{children}</div>
<div className="min-h-screen p-4">{children}</div>
</div>
</div>
</>

2
apps/dashboard/src/app/(auth)/live-events/live-events.tsx
View File

@@ -102,7 +102,7 @@ const useWebEventGenerator = () => {
function createNewEvent() {
const newEvent = generateEvent();
setEvents((prevEvents) => [newEvent, ...prevEvents]);
timer = setTimeout(() => createNewEvent(), Math.random() * 1000);
timer = setTimeout(() => createNewEvent(), Math.random() * 3000);
}
createNewEvent();

9
apps/dashboard/src/app/(auth)/login/[[...login]]/page.tsx
View File

@@ -1,9 +0,0 @@
import { SignIn } from '@clerk/nextjs';
export default function Page() {
return (
<div className="flex min-h-screen items-center justify-center p-4">
<SignIn signUpUrl="/register" />
</div>
);
}

33
apps/dashboard/src/app/(auth)/login/page.tsx Normal file
View File

@@ -0,0 +1,33 @@
import { Or } from '@/components/auth/or';
import { SignInEmailForm } from '@/components/auth/sign-in-email-form';
import { SignInGithub } from '@/components/auth/sign-in-github';
import { SignInGoogle } from '@/components/auth/sign-in-google';
import { LinkButton } from '@/components/ui/button';
import { auth } from '@openpanel/auth/nextjs';
import { redirect } from 'next/navigation';
export default async function Page() {
const session = await auth();
if (session.userId) {
return redirect('/');
}
return (
<div className="flex h-full center-center w-full">
<div className="col gap-8 max-w-md w-full">
<div className="col md:row gap-4">
<SignInGithub type="sign-in" />
<SignInGoogle type="sign-in" />
</div>
<Or />
<div className="card p-8">
<SignInEmailForm />
</div>
<LinkButton variant={'outline'} size="lg" href="/onboarding">
No account? Sign up today
</LinkButton>
</div>
</div>
);
}

9
apps/dashboard/src/app/(auth)/register/[[...register]]/page.tsx
View File

@@ -1,9 +0,0 @@
import { SignUp } from '@clerk/nextjs';
export default function Page() {
return (
<div className="flex min-h-screen items-center justify-center p-4">
<SignUp signInUrl="/login" />
</div>
);
}

17
apps/dashboard/src/app/(auth)/reset-password/page.tsx Normal file
View File

@@ -0,0 +1,17 @@
import { ResetPasswordForm } from '@/components/auth/reset-password-form';
import { auth } from '@openpanel/auth/nextjs';
import { redirect } from 'next/navigation';
export default async function Page() {
const session = await auth();
if (session.userId) {
return redirect('/');
}
return (
<div className="flex h-full center-center">
<ResetPasswordForm />
</div>
);
}

9
apps/dashboard/src/app/(auth)/sso-callback/page.tsx
View File

@@ -1,9 +0,0 @@
import { AuthenticateWithRedirectCallback } from '@clerk/nextjs';
export const dynamic = 'force-dynamic';
const SSOCallback = () => {
return <AuthenticateWithRedirectCallback />;
};
export default SSOCallback;

7
apps/dashboard/src/app/(onboarding)/onboarding-layout.tsx
View File

@@ -11,7 +11,12 @@ export const OnboardingDescription = ({
children,
className,
}: Pick<Props, 'children' | 'className'>) => (
<div className={cn('font-medium text-muted-foreground', className)}>
<div
className={cn(
'font-medium text-muted-foreground leading-normal [&_a]:underline [&_a]:font-semibold',
className,
)}
>
{children}
</div>
);

6
apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/page.tsx
View File

@@ -1,5 +1,6 @@
import { getCurrentOrganizations, getProjectWithClients } from '@openpanel/db';
import { getOrganizations, getProjectWithClients } from '@openpanel/db';
import { auth } from '@openpanel/auth/nextjs';
import OnboardingConnect from './onboarding-connect';
type Props = {
@@ -9,7 +10,8 @@ type Props = {
};
const Connect = async ({ params: { projectId } }: Props) => {
const orgs = await getCurrentOrganizations();
const { userId } = await auth();
const orgs = await getOrganizations(userId);
const organizationId = orgs[0]?.id;
if (!organizationId) {
throw new Error('No organization found');

12
apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/verify/onboarding-verify-listener.tsx
View File

@@ -33,13 +33,6 @@ const VerifyListener = ({ client, events: _events, onVerified }: Props) => {
const isConnected = events.length > 0;
const renderBadge = () => {
if (isConnected) {
return <Badge variant={'success'}>Connected</Badge>;
}
return <Badge variant={'destructive'}>Not connected</Badge>;
};
const renderIcon = () => {
if (isConnected) {
return (
@@ -61,9 +54,6 @@ const VerifyListener = ({ client, events: _events, onVerified }: Props) => {
<div className="flex items-center gap-2 text-2xl capitalize">
{client?.name}
</div>
<div className="mt-2 text-sm font-semibold text-muted-foreground">
Connection status: {renderBadge()}
</div>
<div
className={cn(
@@ -75,7 +65,7 @@ const VerifyListener = ({ client, events: _events, onVerified }: Props) => {
>
{renderIcon()}
<div className="flex-1">
<div className="text-lg font-semibold">
<div className="text-lg font-semibold leading-normal">
{isConnected ? 'Success' : 'Waiting for events'}
</div>
{isConnected ? (

85
apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/verify/onboarding-verify.tsx
View File

@@ -4,10 +4,24 @@ import { ButtonContainer } from '@/components/button-container';
import { LinkButton } from '@/components/ui/button';
import { cn } from '@/utils/cn';
import Link from 'next/link';
import { useState } from 'react';
import { useEffect, useState } from 'react';
import type { IServiceEvent, IServiceProjectWithClients } from '@openpanel/db';
import type {
IServiceClient,
IServiceEvent,
IServiceProjectWithClients,
} from '@openpanel/db';
import Syntax from '@/components/syntax';
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from '@/components/ui/accordion';
import { useClientSecret } from '@/hooks/useClientSecret';
import { clipboard } from '@/utils/clipboard';
import { local } from 'd3';
import OnboardingLayout, {
OnboardingDescription,
} from '../../../onboarding-layout';
@@ -36,29 +50,15 @@ const Verify = ({ project, events }: Props) => {
</OnboardingDescription>
}
>
{/*
Sadly we cant have a verify for each type since we use the same client for all different types (website, app, backend)
Pros: the user just need to keep track of one client id/secret
Cons: we cant verify each type individually
Might be a good idea to add a verify for each type in the future, but for now we will just have one verify for all types
{project.types.map((type) => {
const Component = {
website: VerifyWeb,
app: VerifyApp,
backend: VerifyBackend,
}[type];
return <Component key={type} client={client} events={events} />;
})} */}
<VerifyListener
project={project}
client={client}
events={events}
onVerified={setVerified}
/>
<CurlPreview project={project} />
<ButtonContainer>
<LinkButton
href={`/onboarding/${project.id}/connect`}
@@ -80,7 +80,7 @@ const Verify = ({ project, events }: Props) => {
)}
<LinkButton
href="/"
href={`/${project.organizationId}/${project.id}`}
size="lg"
className={cn(
'min-w-28 self-start',
@@ -96,3 +96,48 @@ const Verify = ({ project, events }: Props) => {
};
export default Verify;
function CurlPreview({ project }: { project: IServiceProjectWithClients }) {
const [secret] = useClientSecret();
const client = project.clients[0];
if (!client) {
return null;
}
const code = `curl -X POST ${process.env.NEXT_PUBLIC_API_URL}/track \\
-H "Content-Type: application/json" \\
-H "openpanel-client-id: ${client.id}" \\
-H "openpanel-client-secret: ${secret}" \\
-H "User-Agent: ${window.navigator.userAgent}" \\
-d '{
"type": "track",
"payload": {
"name": "screen_view",
"properties": {
"__title": "Testing OpenPanel - ${project.name}",
"__path": "${project.domain}",
"__referrer": "${process.env.NEXT_PUBLIC_DASHBOARD_URL}"
}
}
}'`;
return (
<div className="card">
<Accordion type="single" collapsible>
<AccordionItem value="item-1">
<AccordionTrigger
className="px-6"
onClick={() => {
clipboard(code, null);
}}
>
Try out the curl command
</AccordionTrigger>
<AccordionContent className="p-0">
<Syntax code={code} />
</AccordionContent>
</AccordionItem>
</Accordion>
</div>
);
}

6
apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/verify/page.tsx
View File

@@ -3,11 +3,12 @@ import { escape } from 'sqlstring';
import {
TABLE_NAMES,
getCurrentOrganizations,
getEvents,
getOrganizations,
getProjectWithClients,
} from '@openpanel/db';
import { auth } from '@openpanel/auth/nextjs';
import OnboardingVerify from './onboarding-verify';
type Props = {
@@ -17,7 +18,8 @@ type Props = {
};
const Verify = async ({ params: { projectId } }: Props) => {
const orgs = await getCurrentOrganizations();
const { userId } = await auth();
const orgs = await getOrganizations(userId);
const organizationId = orgs[0]?.id;
if (!organizationId) {
throw new Error('No organization found');

79
apps/dashboard/src/app/(onboarding)/onboarding/page.tsx
View File

@@ -1,9 +1,78 @@
import { getCurrentOrganizations } from '@openpanel/db';
import { Or } from '@/components/auth/or';
import { SignInGithub } from '@/components/auth/sign-in-github';
import { SignInGoogle } from '@/components/auth/sign-in-google';
import { SignUpEmailForm } from '@/components/auth/sign-up-email-form';
import { auth } from '@openpanel/auth/nextjs';
import { getInviteById } from '@openpanel/db';
import Link from 'next/link';
import { redirect } from 'next/navigation';
import OnboardingLayout, { OnboardingDescription } from '../onboarding-layout';
import OnboardingTracking from './onboarding-tracking';
const Page = async ({
searchParams,
}: { searchParams: { inviteId: string } }) => {
const session = await auth();
const inviteId = await searchParams.inviteId;
const invite = inviteId ? await getInviteById(inviteId) : null;
const hasInviteExpired = invite?.expiresAt && invite.expiresAt < new Date();
if (session.userId) {
return redirect('/');
}
const Tracking = async () => {
return <OnboardingTracking organizations={await getCurrentOrganizations()} />;
return (
<div>
<OnboardingLayout
className="max-w-screen-sm"
title="Create an account"
description={
<OnboardingDescription>
Lets start with creating you account. By creating an account you
accept the{' '}
<Link target="_blank" href="https://openpanel.dev/terms">
Terms of Service
</Link>{' '}
and{' '}
<Link target="_blank" href="https://openpanel.dev/privacy">
Privacy Policy
</Link>
.
</OnboardingDescription>
}
>
{invite && !hasInviteExpired && (
<div className="card p-8 mb-8 col gap-2">
<h2 className="text-2xl font-medium">
Invitation to {invite.organization.name}
</h2>
<p>
After you have created your account, you will be added to the
organization.
</p>
</div>
)}
{invite && hasInviteExpired && (
<div className="card p-8 mb-8 col gap-2">
<h2 className="text-2xl font-medium">
Invitation to {invite.organization.name} has expired
</h2>
<p>
The invitation has expired. Please contact the organization owner
to get a new invitation.
</p>
</div>
)}
<div className="col md:row gap-4">
<SignInGithub type="sign-up" />
<SignInGoogle type="sign-up" />
</div>
<Or className="my-8" />
<div className="col gap-8 p-8 card">
<h2 className="text-2xl font-medium">Sign up with email</h2>
<SignUpEmailForm />
</div>
</OnboardingLayout>
</div>
);
};
export default Tracking;
export default Page;

8
apps/dashboard/src/app/(onboarding)/onboarding/onboarding-tracking.tsx → apps/dashboard/src/app/(onboarding)/onboarding/project/onboarding-create-project.tsx
View File

@@ -26,11 +26,13 @@ import type { z } from 'zod';
import type { IServiceOrganization } from '@openpanel/db';
import { zOnboardingProject } from '@openpanel/validation';
import OnboardingLayout, { OnboardingDescription } from '../onboarding-layout';
import OnboardingLayout, {
OnboardingDescription,
} from '../../onboarding-layout';
type IForm = z.infer<typeof zOnboardingProject>;
const Tracking = ({
export const OnboardingCreateProject = ({
organizations,
}: {
organizations: IServiceOrganization[];
@@ -260,5 +262,3 @@ const Tracking = ({
</form>
);
};
export default Tracking;

11
apps/dashboard/src/app/(onboarding)/onboarding/project/page.tsx Normal file
View File

@@ -0,0 +1,11 @@
import { auth } from '@openpanel/auth/nextjs';
import { getOrganizations } from '@openpanel/db';
import { OnboardingCreateProject } from './onboarding-create-project';
const Page = async () => {
const { userId } = await auth();
const organizations = await getOrganizations(userId);
return <OnboardingCreateProject organizations={organizations} />;
};
export default Page;

40
apps/dashboard/src/app/(onboarding)/skip-onboarding.tsx
View File

@@ -1,22 +1,47 @@
'use client';
import { useLogout } from '@/hooks/useLogout';
import { showConfirm } from '@/modals';
import { api } from '@/trpc/client';
import { useAuth } from '@clerk/nextjs';
import { ChevronLastIcon } from 'lucide-react';
import { usePathname, useRouter } from 'next/navigation';
import { ChevronLastIcon, LogInIcon } from 'lucide-react';
import Link from 'next/link';
import {
usePathname,
useRouter,
useSelectedLayoutSegments,
} from 'next/navigation';
import { useEffect } from 'react';
const PUBLIC_SEGMENTS = [['onboarding']];
const SkipOnboarding = () => {
const router = useRouter();
const pathname = usePathname();
const res = api.onboarding.skipOnboardingCheck.useQuery();
const auth = useAuth();
const segments = useSelectedLayoutSegments();
const isPublic = PUBLIC_SEGMENTS.some((segment) =>
segments.every((s, index) => s === segment[index]),
);
const res = api.onboarding.skipOnboardingCheck.useQuery(undefined, {
enabled: !isPublic,
});
const logout = useLogout();
useEffect(() => {
res.refetch();
}, [pathname]);
if (!pathname.startsWith('/onboarding')) return null;
// Do not show skip onboarding for the first step (register account)
if (isPublic) {
return (
<Link
href="/login"
className="flex items-center gap-2 text-muted-foreground"
>
Login
<LogInIcon size={16} />
</Link>
);
}
return (
<button
@@ -29,8 +54,7 @@ const SkipOnboarding = () => {
title: 'Skip onboarding?',
text: 'Are you sure you want to skip onboarding? Since you do not have any projects, you will be logged out.',
onConfirm() {
auth.signOut();
router.replace(process.env.NEXT_PUBLIC_CLERK_SIGN_IN_URL!);
logout();
},
});
}

16
apps/dashboard/src/app/(onboarding)/steps.tsx
View File

@@ -17,15 +17,15 @@ type Props = {
function useSteps(path: string) {
const steps: Step[] = [
{
name: 'Account creation',
status: 'pending',
match: '/sign-up',
},
{
name: 'General',
name: 'Create an account',
status: 'pending',
match: '/onboarding',
},
{
name: 'Create a project',
status: 'pending',
match: '/onboarding/project',
},
{
name: 'Connect your data',
status: 'pending',
@@ -75,7 +75,7 @@ const Steps = ({ className }: Props) => {
{steps.map((step, index) => (
<div
className={cn(
'flex flex-shrink-0 items-center gap-2 self-start px-3 py-1.5',
'flex flex-shrink-0 items-center gap-4 self-start px-3 py-1.5',
step.status === 'current' &&
'rounded-xl border border-border bg-card',
step.status === 'completed' &&
@@ -108,7 +108,7 @@ const Steps = ({ className }: Props) => {
</div>
</div>
<div className=" font-medium">{step.name}</div>
<div className="font-medium">{step.name}</div>
</div>
))}
</div>

122
apps/dashboard/src/app/api/clerk/webhook/route.ts
View File

@@ -1,122 +0,0 @@
import type { WebhookEvent } from '@clerk/nextjs/server';
import { pathOr } from 'ramda';
import { AccessLevel, db } from '@openpanel/db';
export const dynamic = 'force-dynamic';
export async function POST(request: Request) {
const payload: WebhookEvent = await request.json();
if (payload.type === 'user.created') {
const email = payload.data.email_addresses[0]?.email_address;
const emails = payload.data.email_addresses.map((e) => e.email_address);
if (!email) {
return Response.json(
{ message: 'No email address found' },
{ status: 400 },
);
}
const user = await db.user.create({
data: {
id: payload.data.id,
email,
firstName: payload.data.first_name,
lastName: payload.data.last_name,
},
});
const memberships = await db.member.findMany({
where: {
email: {
in: emails,
},
userId: null,
},
});
for (const membership of memberships) {
const access = pathOr<string[]>([], ['meta', 'access'], membership);
await db.$transaction([
// Update the member to link it to the user
// This will remove the item from invitations
db.member.update({
where: {
id: membership.id,
},
data: {
userId: user.id,
},
}),
db.projectAccess.createMany({
data: access
.filter((a) => typeof a === 'string')
.map((projectId) => ({
organizationId: membership.organizationId,
projectId: projectId,
userId: user.id,
level: AccessLevel.read,
})),
}),
]);
}
}
if (payload.type === 'organizationMembership.created') {
const access = payload.data.public_metadata.access;
if (Array.isArray(access)) {
await db.projectAccess.createMany({
data: access
.filter((a): a is string => typeof a === 'string')
.map((projectId) => ({
organizationId: payload.data.organization.slug,
projectId: projectId,
userId: payload.data.public_user_data.user_id,
level: AccessLevel.read,
})),
});
}
}
if (payload.type === 'user.deleted') {
await db.$transaction([
db.user.update({
where: {
id: payload.data.id,
},
data: {
deletedAt: new Date(),
firstName: null,
lastName: null,
},
}),
db.projectAccess.deleteMany({
where: {
userId: payload.data.id,
},
}),
db.member.deleteMany({
where: {
userId: payload.data.id,
},
}),
]);
}
if (payload.type === 'organizationMembership.deleted') {
await db.projectAccess.deleteMany({
where: {
organizationId: payload.data.organization.slug,
userId: payload.data.public_user_data.user_id,
},
});
}
return Response.json({ message: 'Webhook received!' });
}
export function GET() {
return Response.json({ message: 'Hello World!' });
}

2
apps/dashboard/src/app/layout.tsx
View File

@@ -29,7 +29,7 @@ export default function RootLayout({
<html lang="en" suppressHydrationWarning>
<body
className={cn(
'grainy min-h-screen bg-def-100 font-sans text-base antialiased',
'grainy min-h-screen bg-def-100 font-sans text-base antialiased leading-normal',
GeistSans.variable,
GeistMono.variable,
)}

17
apps/dashboard/src/app/providers.tsx
View File

@@ -6,7 +6,6 @@ import { ModalProvider } from '@/modals';
import type { AppStore } from '@/redux';
import makeStore from '@/redux';
import { api } from '@/trpc/client';
import { ClerkProvider, useAuth } from '@clerk/nextjs';
import { OpenPanelComponent } from '@openpanel/nextjs';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { httpLink } from '@trpc/client';
@@ -18,7 +17,6 @@ import { Toaster } from 'sonner';
import superjson from 'superjson';
function AllProviders({ children }: { children: React.ReactNode }) {
const { getToken } = useAuth();
const [queryClient] = useState(
() =>
new QueryClient({
@@ -44,15 +42,6 @@ function AllProviders({ children }: { children: React.ReactNode }) {
mode: 'cors',
});
},
async headers() {
const token = await getToken();
if (token) {
return {
Authorization: `Bearer ${token}`,
};
}
return {};
},
}),
],
}),
@@ -97,9 +86,5 @@ function AllProviders({ children }: { children: React.ReactNode }) {
}
export default function Providers({ children }: { children: React.ReactNode }) {
return (
<ClerkProvider>
<AllProviders>{children}</AllProviders>
</ClerkProvider>
);
return <AllProviders>{children}</AllProviders>;
}