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.

Sign up for GitHub

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

Fix <GoogleOneTap /> examples #1950

Merged
merged 4 commits into from
Jan 29, 2025
+33 −34
Merged

Fix <GoogleOneTap /> examples #1950

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9b65eca
docs: Fix GoogleOneTap examples
wobsoriano Jan 27, 2025
125d81c
add highlights
wobsoriano Jan 27, 2025
6ac1f8e
simplify examples; add react and remix
alexisintech Jan 29, 2025
9200ea3
fix react filenames
alexisintech Jan 29, 2025
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
55 changes: 29 additions & 26 deletions docs/components/authentication/google-one-tap.mdx
View file
Original file line number Diff line number Diff line change
@@ -54,46 +54,49 @@ The following example includes basic implementation of the `<GoogleOneTap />` co
> [!NOTE]
> `<GoogleOneTap>` does not render if the user is already signed into your Clerk application, so there's no need to manually check if a user is signed in yourself before rendering it.
<Tabs items={["Next.js", "Astro", "Vue"]}>
<Tabs items={["Next.js", "Astro", "React", "Remix", "Vue"]}>
<Tab>
```tsx {{ filename: 'app/layout.tsx', mark: [2, 11] }}
import React from 'react'
import { ClerkProvider, GoogleOneTap } from '@clerk/nextjs'

export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<title>Google One Tap with Clerk and Next.js</title>
</head>
<ClerkProvider>
<GoogleOneTap />
<body>{children}</body>
</ClerkProvider>
</html>
)
```tsx {{ filename: 'app/sign-in/[[...sign-in]]/page.tsx' }}
import { GoogleOneTap } from '@clerk/nextjs'

export default function Page() {
return <GoogleOneTap />
}
```
</Tab>

<Tab>
```astro {{ filename: 'layouts/Layout.astro' }}
```astro {{ filename: 'pages/sign-in.astro' }}
---
import { GoogleOneTap } from '@clerk/astro/components'
---
<html lang="en">
<head>
<title>Google One Tap with Clerk and Astro</title>
</head>
<GoogleOneTap />
```
</Tab>

<GoogleOneTap />
</html>
<Tab>
```jsx {{ filename: 'src/sign-in.tsx' }}
import { GoogleOneTap } from '@clerk/clerk-react'

const SignInPage = () => <GoogleOneTap />

export default SignInPage
```
</Tab>

<Tab>
```jsx {{ filename: 'app/routes/sign-in/$.tsx' }}
import { GoogleOneTap } from '@clerk/remix'

export default function Page() {
return <GoogleOneTap />
}
```
</Tab>

<Tab>
```vue {{ filename: 'App.vue' }}
```vue {{ filename: 'sign-in.vue' }}
<script setup lang="ts">
import { GoogleOneTap } from '@clerk/vue'
</script>
@@ -110,7 +113,7 @@ The following example includes basic implementation of the `<GoogleOneTap />` co
The methods in this section are available on instances of the [`Clerk`](/docs/references/javascript/clerk/clerk) class and are used to render and control the `<GoogleOneTap />` component.

> [!NOTE]
> The examples in this section assume you have completed the [JavaScript quickstart](/docs/quickstarts/javascript) to set up the Clerk JS SDK in your project.
> The examples in this section assume you have completed the [JavaScript quickstart](/docs/quickstarts/javascript) to set up the ClerkJS SDK in your project.
### `openGoogleOneTap()`

8 changes: 2 additions & 6 deletions docs/components/authentication/sign-in.mdx
View file
Original file line number Diff line number Diff line change
@@ -131,7 +131,7 @@ The following example includes basic implementation of the `<SignIn />` componen
</Tab>

<Tab>
```jsx {{ filename: '/src/sign-in/[[...index]].tsx' }}
```jsx {{ filename: 'src/sign-in.tsx' }}
import { SignIn } from '@clerk/clerk-react'

const SignInPage = () => <SignIn />
@@ -145,11 +145,7 @@ The following example includes basic implementation of the `<SignIn />` componen
import { SignIn } from '@clerk/remix'

export default function SignInPage() {
return (
<div style={{ border: '2px solid blue', padding: '2rem' }}>
<SignIn />
</div>
)
return <SignIn />
}
```
</Tab>
2 changes: 1 addition & 1 deletion docs/components/authentication/sign-up.mdx
View file
Original file line number Diff line number Diff line change
@@ -117,7 +117,7 @@ The following example includes basic implementation of the `<SignUp />` componen
</Tab>

<Tab>
```jsx {{ filename: '/src/sign-up/[[...index]].tsx' }}
```jsx {{ filename: 'src/sign-up.tsx' }}
import { SignUp } from '@clerk/clerk-react'

const SignUpPage = () => <SignUp />
2 changes: 1 addition & 1 deletion docs/components/waitlist.mdx
View file
Original file line number Diff line number Diff line change
@@ -70,7 +70,7 @@ The following example includes a basic implementation of the `<Waitlist />` comp
</Tab>

<Tab>
```jsx {{ filename: '/waitlist.tsx' }}
```jsx {{ filename: 'src/waitlist.tsx' }}
import { Waitlist } from '@clerk/clerk-react'

export default function WaitlistPage() {