Login to Org using Next.js Login Link
I can't seem to get the loginlink to work. I click the link/button and it does nothing. When I hover, the link looks correct? See attached screenshot (at bottom). No network call happens.
"use client";
import * as React from "react";
import { Check, ChevronsUpDown } from "lucide-react";
import { LoginLink } from "@kinde-oss/kinde-auth-nextjs/components";
import { Course } from "../layout";
interface ComboBoxProps {
currentCourse: Course;
allCourses: Course[];
}
export function ComboBox(props: ComboBoxProps) {
const { currentCourse, allCourses } = props;
const [open, setOpen] = React.useState(false);
const [orgCode, setOrgCode] = React.useState("");
const [courseName, setCourseName] = React.useState(currentCourse.courseName);
console.log("Current course:", currentCourse);
console.log("All courses:", allCourses);
return (
<>{allCourses.map((course) => (
<LoginLink key={course.orgCode} orgCode={course.orgCode}>
<CommandItem
value={course.orgCode}
onSelect={(currentOrgCode) => {
setOrgCode(
currentOrgCode === orgCode ? "" : currentOrgCode
);
setCourseName(course.courseName);
setOpen(false);
}}
>
<Check
className={cn(
"mr-2 h-4 w-4",
orgCode === course.orgCode ? "opacity-100" : "opacity-0"
)}
/>
{course.courseName}
</CommandItem>
</LoginLink>
))}
</>
);
}"use client";
import * as React from "react";
import { Check, ChevronsUpDown } from "lucide-react";
import { LoginLink } from "@kinde-oss/kinde-auth-nextjs/components";
import { Course } from "../layout";
interface ComboBoxProps {
currentCourse: Course;
allCourses: Course[];
}
export function ComboBox(props: ComboBoxProps) {
const { currentCourse, allCourses } = props;
const [open, setOpen] = React.useState(false);
const [orgCode, setOrgCode] = React.useState("");
const [courseName, setCourseName] = React.useState(currentCourse.courseName);
console.log("Current course:", currentCourse);
console.log("All courses:", allCourses);
return (
<>{allCourses.map((course) => (
<LoginLink key={course.orgCode} orgCode={course.orgCode}>
<CommandItem
value={course.orgCode}
onSelect={(currentOrgCode) => {
setOrgCode(
currentOrgCode === orgCode ? "" : currentOrgCode
);
setCourseName(course.courseName);
setOpen(false);
}}
>
<Check
className={cn(
"mr-2 h-4 w-4",
orgCode === course.orgCode ? "opacity-100" : "opacity-0"
)}
/>
{course.courseName}
</CommandItem>
</LoginLink>
))}
</>
);
}
