Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: google auth provider #88

Merged
merged 1 commit into from
Jan 4, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 2 additions & 7 deletions apps/nextjs/src/app/_components/auth-showcase.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,7 @@ export async function AuthShowcase({ provider }: Props) {

if (!session) {
return (
<SignIn
provider={provider}
className="rounded-full bg-white/10 px-10 py-3 font-semibold no-underline transition hover:bg-white/20"
>
<SignIn provider={provider}>
Sign in with {provider.charAt(0).toUpperCase() + provider.slice(1)}
</SignIn>
);
Expand All @@ -27,9 +24,7 @@ export async function AuthShowcase({ provider }: Props) {
{session && <span>Logged in as {session.user.name}</span>}
</p>

<SignOut className="rounded-full bg-white/10 px-10 py-3 font-semibold no-underline transition hover:bg-white/20">
Sign out
</SignOut>
<SignOut>Sign out</SignOut>
</div>
);
}
2 changes: 2 additions & 0 deletions apps/nextjs/src/app/_components/button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ const Button = forwardRef<Ref, Props>(
{
"border border-white bg-transparent px-4 py-2 text-white no-underline hover:border-transparent hover:bg-white hover:text-purple-500":
variant === "primary",
"rounded-full bg-white/10 px-10 py-3 font-semibold no-underline transition hover:bg-white/20":
variant === "secondary",
"p-0 text-white hover:underline": variant === "link",
},
className,
Expand Down
2 changes: 1 addition & 1 deletion apps/nextjs/src/app/_components/form/Input.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ type Props = InputHTMLAttributes<HTMLInputElement>;
/* <Input />
============================================================================= */
const Input = forwardRef<Ref, Props>(
({ onClick, className, type, ...props }, ref) => (
({ onClick, className, type = "text", ...props }, ref) => (
<input
className={classNames(
"mb-0 block w-full appearance-none rounded border border-white bg-transparent bg-clip-padding px-3 py-2 text-sm text-white backdrop-blur transition placeholder:text-gray-400 disabled:cursor-not-allowed disabled:text-white disabled:opacity-50",
Expand Down
5 changes: 4 additions & 1 deletion apps/nextjs/src/app/_components/form/Label.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,10 @@ const Label = forwardRef<Ref, Props>(
<label
ref={ref}
htmlFor={htmlFor}
className={classNames("mb-1 text-sm font-semibold uppercase", className)}
className={classNames(
"mb-1 text-left text-sm font-semibold uppercase",
className,
)}
{...props}
/>
),
Expand Down
21 changes: 14 additions & 7 deletions apps/nextjs/src/components/auth.tsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,31 @@
import type { ComponentProps } from "react";

import type { OAuthProviders } from "@acme/auth";
import { CSRF_experimental } from "@acme/auth";

import Button from "~/app/_components/button";

export function SignIn({
provider,
...props
}: { provider: OAuthProviders } & ComponentProps<"button">) {
}: {
provider: OAuthProviders;
children: React.ReactNode;
}) {
return (
<form action={`/api/auth/signin/${provider}`} method="post">
<button {...props} />
<Button variant="secondary" type="submit" className="w-full">
{props.children}
</Button>
<CSRF_experimental />
</form>
);
}

export function SignOut(props: ComponentProps<"button">) {
export function SignOut(props: { children: React.ReactNode }) {
return (
<form action="/api/auth/signout" method="post">
<button {...props} />
<form action="/api/auth/signout" method="post" className="w-full">
<Button variant="secondary" type="submit">
{props.children}
</Button>
<CSRF_experimental />
</form>
);
Expand Down
15 changes: 10 additions & 5 deletions packages/auth/index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import Github from "@auth/core/providers/github";
// import Google from "@auth/core/providers/google";
import Google from "@auth/core/providers/google";
import type { DefaultSession } from "@auth/core/types";
import { PrismaAdapter } from "@auth/prisma-adapter";
import NextAuth from "next-auth";
Expand Down Expand Up @@ -28,14 +28,19 @@ export const {
CSRF_experimental,
} = NextAuth({
adapter: PrismaAdapter(prisma),
secret: env.NEXTAUTH_SECRET,
providers: [
// Google({
// clientId: env.GOOGLE_CLIENT_ID,
// clientSecret: env.GOOGLE_CLIENT_SECRET,
// }),
Google({
clientId: env.GOOGLE_CLIENT_ID,
clientSecret: env.GOOGLE_CLIENT_SECRET,
// NextJS is able to automatically link accounts. See the discussion thread:
// https://github.com/nextauthjs/next-auth/discussions/2808#discussioncomment-6021287
allowDangerousEmailAccountLinking: true,
}),
Github({
clientId: env.GITHUB_CLIENT_ID,
clientSecret: env.GITHUB_CLIENT_SECRET,
allowDangerousEmailAccountLinking: true,
}),
],
callbacks: {
Expand Down
Loading