feat(clerk-js,clerk-react,nextjs,types): Drop experimental tag from GoogleOneTap#3392

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

Merged
panteliselef merged 4 commits into from
May 20, 2024
Merged

feat(clerk-js,clerk-react,nextjs,types): Drop experimental tag from GoogleOneTap #3392

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d1fc0b8
feat(clerk-js,clerk-react,nextjs,types): Drop experimental tag from G…
panteliselef May 16, 2024
33449e7
feat(clerk-js,clerk-react,nextjs,types): Add changeset
panteliselef May 16, 2024
1f5b903
test(chrome-extension): Update snapshots
panteliselef May 16, 2024
e97824f
Merge branch 'main' into elef/prepare-one-tap-for-ga
panteliselef May 20, 2024
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
53 changes: 53 additions & 0 deletions .changeset/shiny-yaks-wave.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
---
'@clerk/clerk-js': minor
'@clerk/nextjs': minor
'@clerk/clerk-react': minor
'@clerk/types': minor
---

Add support for GoogleOneTap. New APIs listed:
### React component
- `<GoogleOneTap/>`

Customize the UX of the prompt

```tsx
<GoogleOneTap
cancelOnTapOutside={false}
itpSupport={false}
fedCmSupport={false}
/>
```

### Use the component from with Vanilla JS
- `Clerk.openGoogleOneTap(props: GoogleOneTapProps)`
- `Clerk.closeGoogleOneTap()`
### Low level APIs for custom flows
- `await Clerk.authenticateWithGoogleOneTap({ token: 'xxxx'})`
- `await Clerk.handleGoogleOneTapCallback()`

We recommend using this two methods together in order and let Clerk to perform the correct redirections.
```tsx
google.accounts.id.initialize({
callback: async response => {
const signInOrUp = await Clerk.authenticateWithGoogleOneTap({ token: response.credential})
await Clerk.handleGoogleOneTapCallback(signInOrUp, {
signInForceRedirectUrl: window.location.href,
})
},
});
```

In case you want to handle the redirection and session management yourself you can do so like this
```tsx
google.accounts.id.initialize({
callback: async response => {
const signInOrUp = await Clerk.authenticateWithGoogleOneTap({ token: response.credential})
if(signInOrUp.status === 'complete') {
await Clerk.setActive({
session: signInOrUp.createdSessionId
})
}
},
});
```
2 changes: 1 addition & 1 deletion packages/chrome-extension/src/__tests__/__snapshots__/exports.test.ts.snap
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,7 @@ exports[`public exports should not include a breaking change 1`] = `
"ClerkLoading",
"ClerkProvider",
"CreateOrganization",
"GoogleOneTap",
"OrganizationList",
"OrganizationProfile",
"OrganizationSwitcher",
Expand All@@ -26,7 +27,6 @@ exports[`public exports should not include a breaking change 1`] = `
"SignedOut",
"UserButton",
"UserProfile",
"__experimental_GoogleOneTap",
"useAuth",
"useClerk",
"useEmailLink",
Expand Down
24 changes: 10 additions & 14 deletions packages/clerk-js/src/core/clerk.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -16,8 +16,8 @@ import {
} from '@clerk/shared';
import { eventPrebuiltComponentMounted, TelemetryCollector } from '@clerk/shared/telemetry';
import type {
__experimental_AuthenticateWithGoogleOneTapParams,
ActiveSessionResource,
AuthenticateWithGoogleOneTapParams,
AuthenticateWithMetamaskParams,
Clerk as ClerkInterface,
ClerkAPIError,
Expand All@@ -28,12 +28,12 @@ import type {
DomainOrProxyUrl,
EnvironmentJSON,
EnvironmentResource,
GoogleOneTapProps,
HandleEmailLinkVerificationParams,
HandleOAuthCallbackParams,
InstanceType,
ListenerCallback,
NavigateOptions,
OneTapProps,
OrganizationListProps,
OrganizationProfileProps,
OrganizationResource,
Expand DownExpand Up@@ -330,14 +330,14 @@ export class Clerk implements ClerkInterface {
}
};

public __experimental_openGoogleOneTap = (props?: OneTapProps): void => {
public openGoogleOneTap = (props?: GoogleOneTapProps): void => {
this.assertComponentsReady(this.#componentControls);
void this.#componentControls
.ensureMounted({ preloadHint: 'OneTap' })
.ensureMounted({ preloadHint: 'GoogleOneTap' })
.then(controls => controls.openModal('googleOneTap', props || {}));
};

public __experimental_closeGoogleOneTap = (): void => {
public closeGoogleOneTap = (): void => {
this.assertComponentsReady(this.#componentControls);
void this.#componentControls.ensureMounted().then(controls => controls.closeModal('googleOneTap'));
};
Expand DownExpand Up@@ -1003,7 +1003,7 @@ export class Clerk implements ClerkInterface {
return null;
};

public __experimental_handleGoogleOneTapCallback = async (
public handleGoogleOneTapCallback = async (
signInOrUp: SignInResource | SignUpResource,
params: HandleOAuthCallbackParams,
customNavigate?: (to: string) => Promise<unknown>,
Expand DownExpand Up@@ -1263,23 +1263,19 @@ export class Clerk implements ClerkInterface {
return this.setActive({ session: null });
};

public __experimental_authenticateWithGoogleOneTap = async (
params: __experimental_AuthenticateWithGoogleOneTapParams,
public authenticateWithGoogleOneTap = async (
params: AuthenticateWithGoogleOneTapParams,
): Promise<SignInResource | SignUpResource> => {
return this.client?.signIn
.create({
// TODO-ONETAP: Add new types when feature is ready for public beta
// @ts-expect-error
strategy: 'google_one_tap',
googleOneTapToken: params.token,
token: params.token,
})
.catch(err => {
if (isClerkAPIResponseError(err) && err.errors[0].code === 'external_account_not_found') {
return this.client?.signUp.create({
// TODO-ONETAP: Add new types when feature is ready for public beta
// @ts-expect-error
strategy: 'google_one_tap',
googleOneTapToken: params.token,
token: params.token,
});
}
throw err;
Expand Down
25 changes: 1 addition & 24 deletions packages/clerk-js/src/core/resources/SignIn.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
import { deepSnakeToCamel, isClerkAPIResponseError, Poller } from '@clerk/shared';
import { deepSnakeToCamel, Poller } from '@clerk/shared';
import type {
__experimental_AuthenticateWithGoogleOneTapParams,
AttemptFirstFactorParams,
AttemptSecondFactorParams,
AuthenticateWithPasskeyParams,
Expand All@@ -26,7 +25,6 @@ import type {
SignInSecondFactor,
SignInStartEmailLinkFlowParams,
SignInStatus,
SignUpResource,
VerificationResource,
Web3SignatureConfig,
Web3SignatureFactor,
Expand DownExpand Up@@ -225,27 +223,6 @@ export class SignIn extends BaseResource implements SignInResource {
}
};

public __experimental_authenticateWithGoogleOneTap = async (
params: __experimental_AuthenticateWithGoogleOneTapParams,
): Promise<SignInResource | SignUpResource> => {
return this.create({
// TODO-ONETAP: Add new types when feature is ready for public beta
// @ts-expect-error
strategy: 'google_one_tap',
googleOneTapToken: params.token,
}).catch(err => {
if (isClerkAPIResponseError(err) && err.errors[0].code === 'external_account_not_found') {
return SignIn.clerk.client?.signUp.create({
// TODO-ONETAP: Add new types when feature is ready for public beta
// @ts-expect-error
strategy: 'google_one_tap',
googleOneTapToken: params.token,
});
}
throw err;
}) as Promise<SignInResource | SignUpResource>;
};

Comment on lines -228 to -248

@panteliselefpanteliselefMay 16, 2024

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is moved to Clerk.ts

public authenticateWithWeb3 = async (params: AuthenticateWithWeb3Params): Promise<SignInResource> => {
const { identifier, generateSignature } = params || {};
if (!(typeof generateSignature === 'function')) {
Expand Down
4 changes: 2 additions & 2 deletions packages/clerk-js/src/ui/Components.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,7 +6,7 @@ import type {
ClerkOptions,
CreateOrganizationProps,
EnvironmentResource,
OneTapProps,
GoogleOneTapProps,
OrganizationProfileProps,
SignInProps,
SignUpProps,
Expand DownExpand Up@@ -84,7 +84,7 @@ interface ComponentsProps {
interface ComponentsState {
appearance: Appearance | undefined;
options: ClerkOptions | undefined;
googleOneTapModal: null | OneTapProps;
googleOneTapModal: null | GoogleOneTapProps;
signInModal: null | SignInProps;
signUpModal: null | SignUpProps;
userProfileModal: null | UserProfileProps;
Expand Down
4 changes: 2 additions & 2 deletions packages/clerk-js/src/ui/components/GoogleOneTap/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
import type { OneTapProps } from '@clerk/types';
import type { GoogleOneTapProps } from '@clerk/types';
import React from 'react';

import { withCoreSessionSwitchGuard } from '../../contexts';
Expand All@@ -22,4 +22,4 @@ function OneTapRoutes(): JSX.Element {

OneTapRoutes.displayName = 'OneTap';

export const OneTap: React.ComponentType<OneTapProps> = withCoreSessionSwitchGuard(OneTapRoutes);
export const OneTap: React.ComponentType<GoogleOneTapProps> = withCoreSessionSwitchGuard(OneTapRoutes);
6 changes: 3 additions & 3 deletions packages/clerk-js/src/ui/components/GoogleOneTap/one-tap-start.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -29,10 +29,10 @@ function _OneTapStart(): JSX.Element | null {
async function oneTapCallback(response: GISCredentialResponse) {
isPromptedRef.current = false;
try {
const res = await clerk.__experimental_authenticateWithGoogleOneTap({
const res = await clerk.authenticateWithGoogleOneTap({
token: response.credential,
});
await clerk.__experimental_handleGoogleOneTapCallback(
await clerk.handleGoogleOneTapCallback(
res,
{
signInUrl,
Expand DownExpand Up@@ -80,7 +80,7 @@ function _OneTapStart(): JSX.Element | null {
// Close the modal, when the user clicks outside the prompt or cancels
if (notification.getMomentType() === 'skipped') {
// Unmounts the component will cause the useEffect cleanup function from below to be called
clerk.__experimental_closeGoogleOneTap();
clerk.closeGoogleOneTap();
}
});
isPromptedRef.current = true;
Expand Down
6 changes: 3 additions & 3 deletions packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -14,7 +14,7 @@ import { useRouter } from '../router';
import type {
AvailableComponentCtx,
CreateOrganizationCtx,
OneTapCtx,
GoogleOneTapCtx,
OrganizationListCtx,
OrganizationProfileCtx,
OrganizationSwitcherCtx,
Expand DownExpand Up@@ -497,12 +497,12 @@ export const useCreateOrganizationContext = () => {
};

export const useGoogleOneTapContext = () => {
const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as OneTapCtx;
const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as GoogleOneTapCtx;
const options = useOptions();
const { displayConfig } = useEnvironment();
const { queryParams } = useRouter();

if (componentName !== 'OneTap') {
if (componentName !== 'GoogleOneTap') {
throw new Error('Clerk: useGoogleOneTapContext called outside GoogleOneTap.');
}

Expand Down
8 changes: 5 additions & 3 deletions packages/clerk-js/src/ui/lazyModules/components.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -12,13 +12,15 @@ const componentImportPaths = {
import(/* webpackChunkName: "organizationswitcher" */ './../components/OrganizationSwitcher'),
OrganizationList: () => import(/* webpackChunkName: "organizationlist" */ './../components/OrganizationList'),
ImpersonationFab: () => import(/* webpackChunkName: "impersonationfab" */ './../components/ImpersonationFab'),
OneTap: () => import(/* webpackChunkName: "oneTap" */ './../components/GoogleOneTap'),
GoogleOneTap: () => import(/* webpackChunkName: "oneTap" */ './../components/GoogleOneTap'),
} as const;

export const SignIn = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignIn })));

export const SignInModal = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignInModal })));
export const OneTap = lazy(() => componentImportPaths.OneTap().then(module => ({ default: module.OneTap })));
export const GoogleOneTap = lazy(() =>
componentImportPaths.GoogleOneTap().then(module => ({ default: module.OneTap })),
);

export const SignUp = lazy(() => componentImportPaths.SignUp().then(module => ({ default: module.SignUp })));

Expand DownExpand Up@@ -79,7 +81,7 @@ export const ClerkComponents = {
UserProfileModal,
OrganizationProfileModal,
CreateOrganizationModal,
OneTap,
GoogleOneTap,
};

export type ClerkComponentName = keyof typeof ClerkComponents;
4 changes: 2 additions & 2 deletions packages/clerk-js/src/ui/lazyModules/providers.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -146,9 +146,9 @@ export const LazyOneTapRenderer = (props: LazyOneTapRendererProps) => {
>
<VirtualBodyRootPortal
startPath={props.startPath}
component={ClerkComponents['OneTap']}
component={ClerkComponents['GoogleOneTap']}
props={props.componentProps}
componentName={'OneTap'}
componentName={'GoogleOneTap'}
/>
</AppearanceProvider>
);
Expand Down
10 changes: 5 additions & 5 deletions packages/clerk-js/src/ui/types.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
import type {
CreateOrganizationProps,
OneTapProps,
GoogleOneTapProps,
OrganizationListProps,
OrganizationProfileProps,
OrganizationSwitcherProps,
Expand All@@ -11,7 +11,7 @@ import type {
} from '@clerk/types';

export type {
OneTapProps,
GoogleOneTapProps,
SignInProps,
SignUpProps,
UserButtonProps,
Expand DownExpand Up@@ -74,8 +74,8 @@ export type OrganizationListCtx = OrganizationListProps & {
mode?: ComponentMode;
};

export type OneTapCtx = OneTapProps & {
componentName: 'OneTap';
export type GoogleOneTapCtx = GoogleOneTapProps & {
componentName: 'GoogleOneTap';
};

export type AvailableComponentCtx =
Expand All@@ -87,4 +87,4 @@ export type AvailableComponentCtx =
| CreateOrganizationCtx
| OrganizationSwitcherCtx
| OrganizationListCtx
| OneTapCtx;
| GoogleOneTapCtx;
2 changes: 1 addition & 1 deletion packages/nextjs/src/client-boundary/uiComponents.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -26,7 +26,7 @@ export {
SignOutButton,
SignUpButton,
UserButton,
__experimental_GoogleOneTap,
GoogleOneTap,
} from '@clerk/clerk-react';

// The assignment of UserProfile with BaseUserProfile props is used
Expand Down
2 changes: 1 addition & 1 deletion packages/nextjs/src/index.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -30,7 +30,7 @@ export {
SignUpButton,
UserButton,
UserProfile,
__experimental_GoogleOneTap,
GoogleOneTap,
} from './client-boundary/uiComponents';

/**
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/index.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,7 @@ export {
OrganizationProfile,
CreateOrganization,
OrganizationList,
__experimental_GoogleOneTap,
GoogleOneTap,
} from './uiComponents';

export {
Expand Down
10 changes: 5 additions & 5 deletions packages/react/src/components/uiComponents.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,7 +2,7 @@ import { logErrorInDevMode, without } from '@clerk/shared';
import { isDeeplyEqual } from '@clerk/shared/react';
import type {
CreateOrganizationProps,
OneTapProps,
GoogleOneTapProps,
OrganizationListProps,
OrganizationProfileProps,
OrganizationSwitcherProps,
Expand DownExpand Up@@ -301,12 +301,12 @@ export const OrganizationList = withClerk(({ clerk, ...props }: WithClerkProp<Or
);
}, 'OrganizationList');

export const __experimental_GoogleOneTap = withClerk(({ clerk, ...props }: WithClerkProp<OneTapProps>) => {
export const GoogleOneTap = withClerk(({ clerk, ...props }: WithClerkProp<GoogleOneTapProps>) => {
return (
<Portal
open={clerk.__experimental_openGoogleOneTap}
close={clerk.__experimental_closeGoogleOneTap}
open={clerk.openGoogleOneTap}
close={clerk.closeGoogleOneTap}
props={props}
/>
);
}, 'OneTap');
}, 'GoogleOneTap');
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
feat(clerk-js,clerk-react,nextjs,types): Drop experimental tag from GoogleOneTap#3392

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

 Merged

panteliselef
merged 4 commits into

from

May 20, 2024
 Merged


feat(clerk-js,clerk-react,nextjs,types): Drop experimental tag from GoogleOneTap
#3392
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
d1fc0b8

feat(clerk-js,clerk-react,nextjs,types): Drop experimental tag from G…


panteliselef May 16, 2024
33449e7

feat(clerk-js,clerk-react,nextjs,types): Add changeset


panteliselef May 16, 2024
1f5b903

test(chrome-extension): Update snapshots


panteliselef May 16, 2024
e97824f

Merge branch 'main' into elef/prepare-one-tap-for-ga


panteliselef May 20, 2024

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


53 changes: 53 additions & 0 deletions
.changeset/shiny-yaks-wave.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
---
'@clerk/clerk-js': minor
'@clerk/nextjs': minor
'@clerk/clerk-react': minor
'@clerk/types': minor
---

Add support for GoogleOneTap. New APIs listed:
### React component
- `<GoogleOneTap/>`

Customize the UX of the prompt

```tsx
<GoogleOneTap
 cancelOnTapOutside={false}
 itpSupport={false}
 fedCmSupport={false}
/>
```

### Use the component from with Vanilla JS
- `Clerk.openGoogleOneTap(props: GoogleOneTapProps)`
- `Clerk.closeGoogleOneTap()`
### Low level APIs for custom flows
- `await Clerk.authenticateWithGoogleOneTap({ token: 'xxxx'})`
- `await Clerk.handleGoogleOneTapCallback()`

We recommend using this two methods together in order and let Clerk to perform the correct redirections.
```tsx
google.accounts.id.initialize({
 callback: async response => {
 const signInOrUp = await Clerk.authenticateWithGoogleOneTap({ token: response.credential})
 await Clerk.handleGoogleOneTapCallback(signInOrUp, {
 signInForceRedirectUrl: window.location.href,
 })
 },
});
```

In case you want to handle the redirection and session management yourself you can do so like this
```tsx
google.accounts.id.initialize({
 callback: async response => {
 const signInOrUp = await Clerk.authenticateWithGoogleOneTap({ token: response.credential})
 if(signInOrUp.status === 'complete') {
 await Clerk.setActive({
 session: signInOrUp.createdSessionId
 })
 }
 },
});
```

2 changes: 1 addition & 1 deletion
packages/chrome-extension/src/__tests__/__snapshots__/exports.test.ts.snap

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,7 @@ exports[`public exports should not include a breaking change 1`] = `
 "ClerkLoading",
 "ClerkProvider",
 "CreateOrganization",
 "GoogleOneTap",
 "OrganizationList",
 "OrganizationProfile",
 "OrganizationSwitcher",
Expand All@@ -26,7 +27,6 @@ exports[`public exports should not include a breaking change 1`] = `
 "SignedOut",
 "UserButton",
 "UserProfile",
 "__experimental_GoogleOneTap",
 "useAuth",
 "useClerk",
 "useEmailLink",
Expand Down

24 changes: 10 additions & 14 deletions
packages/clerk-js/src/core/clerk.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,8 +16,8 @@ import {
} from '@clerk/shared';
import { eventPrebuiltComponentMounted, TelemetryCollector } from '@clerk/shared/telemetry';
import type {
 __experimental_AuthenticateWithGoogleOneTapParams,
 ActiveSessionResource,
 AuthenticateWithGoogleOneTapParams,
 AuthenticateWithMetamaskParams,
 Clerk as ClerkInterface,
 ClerkAPIError,
Expand All@@ -28,12 +28,12 @@ import type {
 DomainOrProxyUrl,
 EnvironmentJSON,
 EnvironmentResource,
 GoogleOneTapProps,
 HandleEmailLinkVerificationParams,
 HandleOAuthCallbackParams,
 InstanceType,
 ListenerCallback,
 NavigateOptions,
 OneTapProps,
 OrganizationListProps,
 OrganizationProfileProps,
 OrganizationResource,
Expand DownExpand Up@@ -330,14 +330,14 @@ export class Clerk implements ClerkInterface {
 }
 };

 public __experimental_openGoogleOneTap = (props?: OneTapProps): void => {
 public openGoogleOneTap = (props?: GoogleOneTapProps): void => {
 this.assertComponentsReady(this.#componentControls);
 void this.#componentControls
 .ensureMounted({ preloadHint: 'OneTap' })
 .ensureMounted({ preloadHint: 'GoogleOneTap' })
 .then(controls => controls.openModal('googleOneTap', props || {}));
 };

 public __experimental_closeGoogleOneTap = (): void => {
 public closeGoogleOneTap = (): void => {
 this.assertComponentsReady(this.#componentControls);
 void this.#componentControls.ensureMounted().then(controls => controls.closeModal('googleOneTap'));
 };
Expand DownExpand Up@@ -1003,7 +1003,7 @@ export class Clerk implements ClerkInterface {
 return null;
 };

 public __experimental_handleGoogleOneTapCallback = async (
 public handleGoogleOneTapCallback = async (
 signInOrUp: SignInResource | SignUpResource,
 params: HandleOAuthCallbackParams,
 customNavigate?: (to: string) => Promise<unknown>,
Expand DownExpand Up@@ -1263,23 +1263,19 @@ export class Clerk implements ClerkInterface {
 return this.setActive({ session: null });
 };

 public __experimental_authenticateWithGoogleOneTap = async (
 params: __experimental_AuthenticateWithGoogleOneTapParams,
 public authenticateWithGoogleOneTap = async (
 params: AuthenticateWithGoogleOneTapParams,
 ): Promise<SignInResource | SignUpResource> => {
 return this.client?.signIn
 .create({
 // TODO-ONETAP: Add new types when feature is ready for public beta
 // @ts-expect-error
 strategy: 'google_one_tap',
googleOneTapToken: params.token,
token: params.token,
 })
 .catch(err => {
 if (isClerkAPIResponseError(err) && err.errors[0].code === 'external_account_not_found') {
 return this.client?.signUp.create({
 // TODO-ONETAP: Add new types when feature is ready for public beta
 // @ts-expect-error
 strategy: 'google_one_tap',
googleOneTapToken: params.token,
token: params.token,
 });
 }
 throw err;
Expand Down

25 changes: 1 addition & 24 deletions
packages/clerk-js/src/core/resources/SignIn.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
import { deepSnakeToCamel, isClerkAPIResponseError, Poller } from '@clerk/shared';
import { deepSnakeToCamel, Poller } from '@clerk/shared';
import type {
 __experimental_AuthenticateWithGoogleOneTapParams,
 AttemptFirstFactorParams,
 AttemptSecondFactorParams,
 AuthenticateWithPasskeyParams,
Expand All@@ -26,7 +25,6 @@ import type {
 SignInSecondFactor,
 SignInStartEmailLinkFlowParams,
 SignInStatus,
 SignUpResource,
 VerificationResource,
 Web3SignatureConfig,
 Web3SignatureFactor,
Expand DownExpand Up@@ -225,27 +223,6 @@ export class SignIn extends BaseResource implements SignInResource {
 }
 };

 public __experimental_authenticateWithGoogleOneTap = async (
 params: __experimental_AuthenticateWithGoogleOneTapParams,
 ): Promise<SignInResource | SignUpResource> => {
 return this.create({
 // TODO-ONETAP: Add new types when feature is ready for public beta
 // @ts-expect-error
 strategy: 'google_one_tap',
 googleOneTapToken: params.token,
 }).catch(err => {
 if (isClerkAPIResponseError(err) && err.errors[0].code === 'external_account_not_found') {
 return SignIn.clerk.client?.signUp.create({
 // TODO-ONETAP: Add new types when feature is ready for public beta
 // @ts-expect-error
 strategy: 'google_one_tap',
 googleOneTapToken: params.token,
 });
 }
 throw err;
 }) as Promise<SignInResource | SignUpResource>;
 };


Comment on lines

-228
 to 
-248

@panteliselefpanteliselefMay 16, 2024

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is moved to Clerk.ts
 public authenticateWithWeb3 = async (params: AuthenticateWithWeb3Params): Promise<SignInResource> => {
 const { identifier, generateSignature } = params || {};
 if (!(typeof generateSignature === 'function')) {
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/Components.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,7 +6,7 @@ import type {
 ClerkOptions,
 CreateOrganizationProps,
 EnvironmentResource,
OneTapProps,
GoogleOneTapProps,
 OrganizationProfileProps,
 SignInProps,
 SignUpProps,
Expand DownExpand Up@@ -84,7 +84,7 @@ interface ComponentsProps {
interface ComponentsState {
 appearance: Appearance | undefined;
 options: ClerkOptions | undefined;
 googleOneTapModal: null | OneTapProps;
 googleOneTapModal: null | GoogleOneTapProps;
 signInModal: null | SignInProps;
 signUpModal: null | SignUpProps;
 userProfileModal: null | UserProfileProps;
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/components/GoogleOneTap/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
import type { OneTapProps } from '@clerk/types';
import type { GoogleOneTapProps } from '@clerk/types';
import React from 'react';

import { withCoreSessionSwitchGuard } from '../../contexts';
Expand All@@ -22,4 +22,4 @@ function OneTapRoutes(): JSX.Element {

OneTapRoutes.displayName = 'OneTap';

export const OneTap: React.ComponentType<OneTapProps> = withCoreSessionSwitchGuard(OneTapRoutes);
export const OneTap: React.ComponentType<GoogleOneTapProps> = withCoreSessionSwitchGuard(OneTapRoutes);

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/components/GoogleOneTap/one-tap-start.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -29,10 +29,10 @@ function _OneTapStart(): JSX.Element | null {
 async function oneTapCallback(response: GISCredentialResponse) {
 isPromptedRef.current = false;
 try {
 const res = await clerk.__experimental_authenticateWithGoogleOneTap({
 const res = await clerk.authenticateWithGoogleOneTap({
 token: response.credential,
 });
 await clerk.__experimental_handleGoogleOneTapCallback(
 await clerk.handleGoogleOneTapCallback(
 res,
 {
 signInUrl,
Expand DownExpand Up@@ -80,7 +80,7 @@ function _OneTapStart(): JSX.Element | null {
 // Close the modal, when the user clicks outside the prompt or cancels
 if (notification.getMomentType() === 'skipped') {
 // Unmounts the component will cause the useEffect cleanup function from below to be called
 clerk.__experimental_closeGoogleOneTap();
 clerk.closeGoogleOneTap();
 }
 });
 isPromptedRef.current = true;
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -14,7 +14,7 @@ import { useRouter } from '../router';
import type {
 AvailableComponentCtx,
 CreateOrganizationCtx,
OneTapCtx,
GoogleOneTapCtx,
 OrganizationListCtx,
 OrganizationProfileCtx,
 OrganizationSwitcherCtx,
Expand DownExpand Up@@ -497,12 +497,12 @@ export const useCreateOrganizationContext = () => {
};

export const useGoogleOneTapContext = () => {
 const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as OneTapCtx;
 const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as GoogleOneTapCtx;
 const options = useOptions();
 const { displayConfig } = useEnvironment();
 const { queryParams } = useRouter();

 if (componentName !== 'OneTap') {
 if (componentName !== 'GoogleOneTap') {
 throw new Error('Clerk: useGoogleOneTapContext called outside GoogleOneTap.');
 }

Expand Down

8 changes: 5 additions & 3 deletions
packages/clerk-js/src/ui/lazyModules/components.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,13 +12,15 @@ const componentImportPaths = {
 import(/* webpackChunkName: "organizationswitcher" */ './../components/OrganizationSwitcher'),
 OrganizationList: () => import(/* webpackChunkName: "organizationlist" */ './../components/OrganizationList'),
 ImpersonationFab: () => import(/* webpackChunkName: "impersonationfab" */ './../components/ImpersonationFab'),
OneTap: () => import(/* webpackChunkName: "oneTap" */ './../components/GoogleOneTap'),
GoogleOneTap: () => import(/* webpackChunkName: "oneTap" */ './../components/GoogleOneTap'),
} as const;

export const SignIn = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignIn })));

export const SignInModal = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignInModal })));
export const OneTap = lazy(() => componentImportPaths.OneTap().then(module => ({ default: module.OneTap })));
export const GoogleOneTap = lazy(() =>
 componentImportPaths.GoogleOneTap().then(module => ({ default: module.OneTap })),
);

export const SignUp = lazy(() => componentImportPaths.SignUp().then(module => ({ default: module.SignUp })));

Expand DownExpand Up@@ -79,7 +81,7 @@ export const ClerkComponents = {
 UserProfileModal,
 OrganizationProfileModal,
 CreateOrganizationModal,
OneTap,
GoogleOneTap,
};

export type ClerkComponentName = keyof typeof ClerkComponents;

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/lazyModules/providers.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -146,9 +146,9 @@ export const LazyOneTapRenderer = (props: LazyOneTapRendererProps) => {
 >
 <VirtualBodyRootPortal
 startPath={props.startPath}
 component={ClerkComponents['OneTap']}
 component={ClerkComponents['GoogleOneTap']}
 props={props.componentProps}
 componentName={'OneTap'}
 componentName={'GoogleOneTap'}
 />
 </AppearanceProvider>
 );
Expand Down

10 changes: 5 additions & 5 deletions
packages/clerk-js/src/ui/types.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
import type {
 CreateOrganizationProps,
OneTapProps,
GoogleOneTapProps,
 OrganizationListProps,
 OrganizationProfileProps,
 OrganizationSwitcherProps,
Expand All@@ -11,7 +11,7 @@ import type {
} from '@clerk/types';

export type {
OneTapProps,
GoogleOneTapProps,
 SignInProps,
 SignUpProps,
 UserButtonProps,
Expand DownExpand Up@@ -74,8 +74,8 @@ export type OrganizationListCtx = OrganizationListProps & {
 mode?: ComponentMode;
};

export type OneTapCtx = OneTapProps & {
 componentName: 'OneTap';
export type GoogleOneTapCtx = GoogleOneTapProps & {
 componentName: 'GoogleOneTap';
};

export type AvailableComponentCtx =
Expand All@@ -87,4 +87,4 @@ export type AvailableComponentCtx =
 | CreateOrganizationCtx
 | OrganizationSwitcherCtx
 | OrganizationListCtx
 | OneTapCtx;
 | GoogleOneTapCtx;

2 changes: 1 addition & 1 deletion
packages/nextjs/src/client-boundary/uiComponents.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -26,7 +26,7 @@ export {
 SignOutButton,
 SignUpButton,
 UserButton,
__experimental_GoogleOneTap,
GoogleOneTap,
} from '@clerk/clerk-react';

// The assignment of UserProfile with BaseUserProfile props is used
Expand Down

2 changes: 1 addition & 1 deletion
packages/nextjs/src/index.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,7 +30,7 @@ export {
 SignUpButton,
 UserButton,
 UserProfile,
__experimental_GoogleOneTap,
GoogleOneTap,
} from './client-boundary/uiComponents';

/**
Expand Down

2 changes: 1 addition & 1 deletion
packages/react/src/components/index.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,7 @@ export {
 OrganizationProfile,
 CreateOrganization,
 OrganizationList,
__experimental_GoogleOneTap,
GoogleOneTap,
} from './uiComponents';

export {
Expand Down

10 changes: 5 additions & 5 deletions
packages/react/src/components/uiComponents.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,7 +2,7 @@ import { logErrorInDevMode, without } from '@clerk/shared';
import { isDeeplyEqual } from '@clerk/shared/react';
import type {
 CreateOrganizationProps,
OneTapProps,
GoogleOneTapProps,
 OrganizationListProps,
 OrganizationProfileProps,
 OrganizationSwitcherProps,
Expand DownExpand Up@@ -301,12 +301,12 @@ export const OrganizationList = withClerk(({ clerk, ...props }: WithClerkProp<Or
 );
}, 'OrganizationList');

export const __experimental_GoogleOneTap = withClerk(({ clerk, ...props }: WithClerkProp<OneTapProps>) => {
export const GoogleOneTap = withClerk(({ clerk, ...props }: WithClerkProp<GoogleOneTapProps>) => {
 return (
 <Portal
 open={clerk.__experimental_openGoogleOneTap}
 close={clerk.__experimental_closeGoogleOneTap}
 open={clerk.openGoogleOneTap}
 close={clerk.closeGoogleOneTap}
 props={props}
 />
 );
}, 'OneTap');
}, 'GoogleOneTap');
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(clerk-js,clerk-react,nextjs,types): Drop experimental tag from GoogleOneTap#3392

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

 Merged

panteliselef
merged 4 commits into

from

May 20, 2024
 Merged


feat(clerk-js,clerk-react,nextjs,types): Drop experimental tag from GoogleOneTap
#3392
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
d1fc0b8

feat(clerk-js,clerk-react,nextjs,types): Drop experimental tag from G…


panteliselef May 16, 2024
33449e7

feat(clerk-js,clerk-react,nextjs,types): Add changeset


panteliselef May 16, 2024
1f5b903

test(chrome-extension): Update snapshots


panteliselef May 16, 2024
e97824f

Merge branch 'main' into elef/prepare-one-tap-for-ga


panteliselef May 20, 2024

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


53 changes: 53 additions & 0 deletions
.changeset/shiny-yaks-wave.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
---
'@clerk/clerk-js': minor
'@clerk/nextjs': minor
'@clerk/clerk-react': minor
'@clerk/types': minor
---

Add support for GoogleOneTap. New APIs listed:
### React component
- `<GoogleOneTap/>`

Customize the UX of the prompt

```tsx
<GoogleOneTap
 cancelOnTapOutside={false}
 itpSupport={false}
 fedCmSupport={false}
/>
```

### Use the component from with Vanilla JS
- `Clerk.openGoogleOneTap(props: GoogleOneTapProps)`
- `Clerk.closeGoogleOneTap()`
### Low level APIs for custom flows
- `await Clerk.authenticateWithGoogleOneTap({ token: 'xxxx'})`
- `await Clerk.handleGoogleOneTapCallback()`

We recommend using this two methods together in order and let Clerk to perform the correct redirections.
```tsx
google.accounts.id.initialize({
 callback: async response => {
 const signInOrUp = await Clerk.authenticateWithGoogleOneTap({ token: response.credential})
 await Clerk.handleGoogleOneTapCallback(signInOrUp, {
 signInForceRedirectUrl: window.location.href,
 })
 },
});
```

In case you want to handle the redirection and session management yourself you can do so like this
```tsx
google.accounts.id.initialize({
 callback: async response => {
 const signInOrUp = await Clerk.authenticateWithGoogleOneTap({ token: response.credential})
 if(signInOrUp.status === 'complete') {
 await Clerk.setActive({
 session: signInOrUp.createdSessionId
 })
 }
 },
});
```

2 changes: 1 addition & 1 deletion
packages/chrome-extension/src/__tests__/__snapshots__/exports.test.ts.snap

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,7 @@ exports[`public exports should not include a breaking change 1`] = `
 "ClerkLoading",
 "ClerkProvider",
 "CreateOrganization",
 "GoogleOneTap",
 "OrganizationList",
 "OrganizationProfile",
 "OrganizationSwitcher",
Expand All@@ -26,7 +27,6 @@ exports[`public exports should not include a breaking change 1`] = `
 "SignedOut",
 "UserButton",
 "UserProfile",
 "__experimental_GoogleOneTap",
 "useAuth",
 "useClerk",
 "useEmailLink",
Expand Down

24 changes: 10 additions & 14 deletions
packages/clerk-js/src/core/clerk.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,8 +16,8 @@ import {
} from '@clerk/shared';
import { eventPrebuiltComponentMounted, TelemetryCollector } from '@clerk/shared/telemetry';
import type {
 __experimental_AuthenticateWithGoogleOneTapParams,
 ActiveSessionResource,
 AuthenticateWithGoogleOneTapParams,
 AuthenticateWithMetamaskParams,
 Clerk as ClerkInterface,
 ClerkAPIError,
Expand All@@ -28,12 +28,12 @@ import type {
 DomainOrProxyUrl,
 EnvironmentJSON,
 EnvironmentResource,
 GoogleOneTapProps,
 HandleEmailLinkVerificationParams,
 HandleOAuthCallbackParams,
 InstanceType,
 ListenerCallback,
 NavigateOptions,
 OneTapProps,
 OrganizationListProps,
 OrganizationProfileProps,
 OrganizationResource,
Expand DownExpand Up@@ -330,14 +330,14 @@ export class Clerk implements ClerkInterface {
 }
 };

 public __experimental_openGoogleOneTap = (props?: OneTapProps): void => {
 public openGoogleOneTap = (props?: GoogleOneTapProps): void => {
 this.assertComponentsReady(this.#componentControls);
 void this.#componentControls
 .ensureMounted({ preloadHint: 'OneTap' })
 .ensureMounted({ preloadHint: 'GoogleOneTap' })
 .then(controls => controls.openModal('googleOneTap', props || {}));
 };

 public __experimental_closeGoogleOneTap = (): void => {
 public closeGoogleOneTap = (): void => {
 this.assertComponentsReady(this.#componentControls);
 void this.#componentControls.ensureMounted().then(controls => controls.closeModal('googleOneTap'));
 };
Expand DownExpand Up@@ -1003,7 +1003,7 @@ export class Clerk implements ClerkInterface {
 return null;
 };

 public __experimental_handleGoogleOneTapCallback = async (
 public handleGoogleOneTapCallback = async (
 signInOrUp: SignInResource | SignUpResource,
 params: HandleOAuthCallbackParams,
 customNavigate?: (to: string) => Promise<unknown>,
Expand DownExpand Up@@ -1263,23 +1263,19 @@ export class Clerk implements ClerkInterface {
 return this.setActive({ session: null });
 };

 public __experimental_authenticateWithGoogleOneTap = async (
 params: __experimental_AuthenticateWithGoogleOneTapParams,
 public authenticateWithGoogleOneTap = async (
 params: AuthenticateWithGoogleOneTapParams,
 ): Promise<SignInResource | SignUpResource> => {
 return this.client?.signIn
 .create({
 // TODO-ONETAP: Add new types when feature is ready for public beta
 // @ts-expect-error
 strategy: 'google_one_tap',
googleOneTapToken: params.token,
token: params.token,
 })
 .catch(err => {
 if (isClerkAPIResponseError(err) && err.errors[0].code === 'external_account_not_found') {
 return this.client?.signUp.create({
 // TODO-ONETAP: Add new types when feature is ready for public beta
 // @ts-expect-error
 strategy: 'google_one_tap',
googleOneTapToken: params.token,
token: params.token,
 });
 }
 throw err;
Expand Down

25 changes: 1 addition & 24 deletions
packages/clerk-js/src/core/resources/SignIn.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
import { deepSnakeToCamel, isClerkAPIResponseError, Poller } from '@clerk/shared';
import { deepSnakeToCamel, Poller } from '@clerk/shared';
import type {
 __experimental_AuthenticateWithGoogleOneTapParams,
 AttemptFirstFactorParams,
 AttemptSecondFactorParams,
 AuthenticateWithPasskeyParams,
Expand All@@ -26,7 +25,6 @@ import type {
 SignInSecondFactor,
 SignInStartEmailLinkFlowParams,
 SignInStatus,
 SignUpResource,
 VerificationResource,
 Web3SignatureConfig,
 Web3SignatureFactor,
Expand DownExpand Up@@ -225,27 +223,6 @@ export class SignIn extends BaseResource implements SignInResource {
 }
 };

 public __experimental_authenticateWithGoogleOneTap = async (
 params: __experimental_AuthenticateWithGoogleOneTapParams,
 ): Promise<SignInResource | SignUpResource> => {
 return this.create({
 // TODO-ONETAP: Add new types when feature is ready for public beta
 // @ts-expect-error
 strategy: 'google_one_tap',
 googleOneTapToken: params.token,
 }).catch(err => {
 if (isClerkAPIResponseError(err) && err.errors[0].code === 'external_account_not_found') {
 return SignIn.clerk.client?.signUp.create({
 // TODO-ONETAP: Add new types when feature is ready for public beta
 // @ts-expect-error
 strategy: 'google_one_tap',
 googleOneTapToken: params.token,
 });
 }
 throw err;
 }) as Promise<SignInResource | SignUpResource>;
 };


Comment on lines

-228
 to 
-248

@panteliselefpanteliselefMay 16, 2024

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is moved to Clerk.ts
 public authenticateWithWeb3 = async (params: AuthenticateWithWeb3Params): Promise<SignInResource> => {
 const { identifier, generateSignature } = params || {};
 if (!(typeof generateSignature === 'function')) {
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/Components.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,7 +6,7 @@ import type {
 ClerkOptions,
 CreateOrganizationProps,
 EnvironmentResource,
OneTapProps,
GoogleOneTapProps,
 OrganizationProfileProps,
 SignInProps,
 SignUpProps,
Expand DownExpand Up@@ -84,7 +84,7 @@ interface ComponentsProps {
interface ComponentsState {
 appearance: Appearance | undefined;
 options: ClerkOptions | undefined;
 googleOneTapModal: null | OneTapProps;
 googleOneTapModal: null | GoogleOneTapProps;
 signInModal: null | SignInProps;
 signUpModal: null | SignUpProps;
 userProfileModal: null | UserProfileProps;
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/components/GoogleOneTap/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
import type { OneTapProps } from '@clerk/types';
import type { GoogleOneTapProps } from '@clerk/types';
import React from 'react';

import { withCoreSessionSwitchGuard } from '../../contexts';
Expand All@@ -22,4 +22,4 @@ function OneTapRoutes(): JSX.Element {

OneTapRoutes.displayName = 'OneTap';

export const OneTap: React.ComponentType<OneTapProps> = withCoreSessionSwitchGuard(OneTapRoutes);
export const OneTap: React.ComponentType<GoogleOneTapProps> = withCoreSessionSwitchGuard(OneTapRoutes);

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/components/GoogleOneTap/one-tap-start.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -29,10 +29,10 @@ function _OneTapStart(): JSX.Element | null {
 async function oneTapCallback(response: GISCredentialResponse) {
 isPromptedRef.current = false;
 try {
 const res = await clerk.__experimental_authenticateWithGoogleOneTap({
 const res = await clerk.authenticateWithGoogleOneTap({
 token: response.credential,
 });
 await clerk.__experimental_handleGoogleOneTapCallback(
 await clerk.handleGoogleOneTapCallback(
 res,
 {
 signInUrl,
Expand DownExpand Up@@ -80,7 +80,7 @@ function _OneTapStart(): JSX.Element | null {
 // Close the modal, when the user clicks outside the prompt or cancels
 if (notification.getMomentType() === 'skipped') {
 // Unmounts the component will cause the useEffect cleanup function from below to be called
 clerk.__experimental_closeGoogleOneTap();
 clerk.closeGoogleOneTap();
 }
 });
 isPromptedRef.current = true;
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -14,7 +14,7 @@ import { useRouter } from '../router';
import type {
 AvailableComponentCtx,
 CreateOrganizationCtx,
OneTapCtx,
GoogleOneTapCtx,
 OrganizationListCtx,
 OrganizationProfileCtx,
 OrganizationSwitcherCtx,
Expand DownExpand Up@@ -497,12 +497,12 @@ export const useCreateOrganizationContext = () => {
};

export const useGoogleOneTapContext = () => {
 const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as OneTapCtx;
 const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as GoogleOneTapCtx;
 const options = useOptions();
 const { displayConfig } = useEnvironment();
 const { queryParams } = useRouter();

 if (componentName !== 'OneTap') {
 if (componentName !== 'GoogleOneTap') {
 throw new Error('Clerk: useGoogleOneTapContext called outside GoogleOneTap.');
 }

Expand Down

8 changes: 5 additions & 3 deletions
packages/clerk-js/src/ui/lazyModules/components.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,13 +12,15 @@ const componentImportPaths = {
 import(/* webpackChunkName: "organizationswitcher" */ './../components/OrganizationSwitcher'),
 OrganizationList: () => import(/* webpackChunkName: "organizationlist" */ './../components/OrganizationList'),
 ImpersonationFab: () => import(/* webpackChunkName: "impersonationfab" */ './../components/ImpersonationFab'),
OneTap: () => import(/* webpackChunkName: "oneTap" */ './../components/GoogleOneTap'),
GoogleOneTap: () => import(/* webpackChunkName: "oneTap" */ './../components/GoogleOneTap'),
} as const;

export const SignIn = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignIn })));

export const SignInModal = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignInModal })));
export const OneTap = lazy(() => componentImportPaths.OneTap().then(module => ({ default: module.OneTap })));
export const GoogleOneTap = lazy(() =>
 componentImportPaths.GoogleOneTap().then(module => ({ default: module.OneTap })),
);

export const SignUp = lazy(() => componentImportPaths.SignUp().then(module => ({ default: module.SignUp })));

Expand DownExpand Up@@ -79,7 +81,7 @@ export const ClerkComponents = {
 UserProfileModal,
 OrganizationProfileModal,
 CreateOrganizationModal,
OneTap,
GoogleOneTap,
};

export type ClerkComponentName = keyof typeof ClerkComponents;

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/lazyModules/providers.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -146,9 +146,9 @@ export const LazyOneTapRenderer = (props: LazyOneTapRendererProps) => {
 >
 <VirtualBodyRootPortal
 startPath={props.startPath}
 component={ClerkComponents['OneTap']}
 component={ClerkComponents['GoogleOneTap']}
 props={props.componentProps}
 componentName={'OneTap'}
 componentName={'GoogleOneTap'}
 />
 </AppearanceProvider>
 );
Expand Down

10 changes: 5 additions & 5 deletions
packages/clerk-js/src/ui/types.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
import type {
 CreateOrganizationProps,
OneTapProps,
GoogleOneTapProps,
 OrganizationListProps,
 OrganizationProfileProps,
 OrganizationSwitcherProps,
Expand All@@ -11,7 +11,7 @@ import type {
} from '@clerk/types';

export type {
OneTapProps,
GoogleOneTapProps,
 SignInProps,
 SignUpProps,
 UserButtonProps,
Expand DownExpand Up@@ -74,8 +74,8 @@ export type OrganizationListCtx = OrganizationListProps & {
 mode?: ComponentMode;
};

export type OneTapCtx = OneTapProps & {
 componentName: 'OneTap';
export type GoogleOneTapCtx = GoogleOneTapProps & {
 componentName: 'GoogleOneTap';
};

export type AvailableComponentCtx =
Expand All@@ -87,4 +87,4 @@ export type AvailableComponentCtx =
 | CreateOrganizationCtx
 | OrganizationSwitcherCtx
 | OrganizationListCtx
 | OneTapCtx;
 | GoogleOneTapCtx;

2 changes: 1 addition & 1 deletion
packages/nextjs/src/client-boundary/uiComponents.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -26,7 +26,7 @@ export {
 SignOutButton,
 SignUpButton,
 UserButton,
__experimental_GoogleOneTap,
GoogleOneTap,
} from '@clerk/clerk-react';

// The assignment of UserProfile with BaseUserProfile props is used
Expand Down

2 changes: 1 addition & 1 deletion
packages/nextjs/src/index.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,7 +30,7 @@ export {
 SignUpButton,
 UserButton,
 UserProfile,
__experimental_GoogleOneTap,
GoogleOneTap,
} from './client-boundary/uiComponents';

/**
Expand Down

2 changes: 1 addition & 1 deletion
packages/react/src/components/index.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,7 @@ export {
 OrganizationProfile,
 CreateOrganization,
 OrganizationList,
__experimental_GoogleOneTap,
GoogleOneTap,
} from './uiComponents';

export {
Expand Down

10 changes: 5 additions & 5 deletions
packages/react/src/components/uiComponents.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,7 +2,7 @@ import { logErrorInDevMode, without } from '@clerk/shared';
import { isDeeplyEqual } from '@clerk/shared/react';
import type {
 CreateOrganizationProps,
OneTapProps,
GoogleOneTapProps,
 OrganizationListProps,
 OrganizationProfileProps,
 OrganizationSwitcherProps,
Expand DownExpand Up@@ -301,12 +301,12 @@ export const OrganizationList = withClerk(({ clerk, ...props }: WithClerkProp<Or
 );
}, 'OrganizationList');

export const __experimental_GoogleOneTap = withClerk(({ clerk, ...props }: WithClerkProp<OneTapProps>) => {
export const GoogleOneTap = withClerk(({ clerk, ...props }: WithClerkProp<GoogleOneTapProps>) => {
 return (
 <Portal
 open={clerk.__experimental_openGoogleOneTap}
 close={clerk.__experimental_closeGoogleOneTap}
 open={clerk.openGoogleOneTap}
 close={clerk.closeGoogleOneTap}
 props={props}
 />
 );
}, 'OneTap');
}, 'GoogleOneTap');
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(clerk-js,clerk-react,nextjs,types): Drop experimental tag from GoogleOneTap#3392

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

 Merged

panteliselef
merged 4 commits into

from

May 20, 2024
 Merged


feat(clerk-js,clerk-react,nextjs,types): Drop experimental tag from GoogleOneTap
#3392
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
d1fc0b8

feat(clerk-js,clerk-react,nextjs,types): Drop experimental tag from G…


panteliselef May 16, 2024
33449e7

feat(clerk-js,clerk-react,nextjs,types): Add changeset


panteliselef May 16, 2024
1f5b903

test(chrome-extension): Update snapshots


panteliselef May 16, 2024
e97824f

Merge branch 'main' into elef/prepare-one-tap-for-ga


panteliselef May 20, 2024

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


53 changes: 53 additions & 0 deletions
.changeset/shiny-yaks-wave.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
---
'@clerk/clerk-js': minor
'@clerk/nextjs': minor
'@clerk/clerk-react': minor
'@clerk/types': minor
---

Add support for GoogleOneTap. New APIs listed:
### React component
- `<GoogleOneTap/>`

Customize the UX of the prompt

```tsx
<GoogleOneTap
 cancelOnTapOutside={false}
 itpSupport={false}
 fedCmSupport={false}
/>
```

### Use the component from with Vanilla JS
- `Clerk.openGoogleOneTap(props: GoogleOneTapProps)`
- `Clerk.closeGoogleOneTap()`
### Low level APIs for custom flows
- `await Clerk.authenticateWithGoogleOneTap({ token: 'xxxx'})`
- `await Clerk.handleGoogleOneTapCallback()`

We recommend using this two methods together in order and let Clerk to perform the correct redirections.
```tsx
google.accounts.id.initialize({
 callback: async response => {
 const signInOrUp = await Clerk.authenticateWithGoogleOneTap({ token: response.credential})
 await Clerk.handleGoogleOneTapCallback(signInOrUp, {
 signInForceRedirectUrl: window.location.href,
 })
 },
});
```

In case you want to handle the redirection and session management yourself you can do so like this
```tsx
google.accounts.id.initialize({
 callback: async response => {
 const signInOrUp = await Clerk.authenticateWithGoogleOneTap({ token: response.credential})
 if(signInOrUp.status === 'complete') {
 await Clerk.setActive({
 session: signInOrUp.createdSessionId
 })
 }
 },
});
```

2 changes: 1 addition & 1 deletion
packages/chrome-extension/src/__tests__/__snapshots__/exports.test.ts.snap

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,7 @@ exports[`public exports should not include a breaking change 1`] = `
 "ClerkLoading",
 "ClerkProvider",
 "CreateOrganization",
 "GoogleOneTap",
 "OrganizationList",
 "OrganizationProfile",
 "OrganizationSwitcher",
Expand All@@ -26,7 +27,6 @@ exports[`public exports should not include a breaking change 1`] = `
 "SignedOut",
 "UserButton",
 "UserProfile",
 "__experimental_GoogleOneTap",
 "useAuth",
 "useClerk",
 "useEmailLink",
Expand Down

24 changes: 10 additions & 14 deletions
packages/clerk-js/src/core/clerk.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,8 +16,8 @@ import {
} from '@clerk/shared';
import { eventPrebuiltComponentMounted, TelemetryCollector } from '@clerk/shared/telemetry';
import type {
 __experimental_AuthenticateWithGoogleOneTapParams,
 ActiveSessionResource,
 AuthenticateWithGoogleOneTapParams,
 AuthenticateWithMetamaskParams,
 Clerk as ClerkInterface,
 ClerkAPIError,
Expand All@@ -28,12 +28,12 @@ import type {
 DomainOrProxyUrl,
 EnvironmentJSON,
 EnvironmentResource,
 GoogleOneTapProps,
 HandleEmailLinkVerificationParams,
 HandleOAuthCallbackParams,
 InstanceType,
 ListenerCallback,
 NavigateOptions,
 OneTapProps,
 OrganizationListProps,
 OrganizationProfileProps,
 OrganizationResource,
Expand DownExpand Up@@ -330,14 +330,14 @@ export class Clerk implements ClerkInterface {
 }
 };

 public __experimental_openGoogleOneTap = (props?: OneTapProps): void => {
 public openGoogleOneTap = (props?: GoogleOneTapProps): void => {
 this.assertComponentsReady(this.#componentControls);
 void this.#componentControls
 .ensureMounted({ preloadHint: 'OneTap' })
 .ensureMounted({ preloadHint: 'GoogleOneTap' })
 .then(controls => controls.openModal('googleOneTap', props || {}));
 };

 public __experimental_closeGoogleOneTap = (): void => {
 public closeGoogleOneTap = (): void => {
 this.assertComponentsReady(this.#componentControls);
 void this.#componentControls.ensureMounted().then(controls => controls.closeModal('googleOneTap'));
 };
Expand DownExpand Up@@ -1003,7 +1003,7 @@ export class Clerk implements ClerkInterface {
 return null;
 };

 public __experimental_handleGoogleOneTapCallback = async (
 public handleGoogleOneTapCallback = async (
 signInOrUp: SignInResource | SignUpResource,
 params: HandleOAuthCallbackParams,
 customNavigate?: (to: string) => Promise<unknown>,
Expand DownExpand Up@@ -1263,23 +1263,19 @@ export class Clerk implements ClerkInterface {
 return this.setActive({ session: null });
 };

 public __experimental_authenticateWithGoogleOneTap = async (
 params: __experimental_AuthenticateWithGoogleOneTapParams,
 public authenticateWithGoogleOneTap = async (
 params: AuthenticateWithGoogleOneTapParams,
 ): Promise<SignInResource | SignUpResource> => {
 return this.client?.signIn
 .create({
 // TODO-ONETAP: Add new types when feature is ready for public beta
 // @ts-expect-error
 strategy: 'google_one_tap',
googleOneTapToken: params.token,
token: params.token,
 })
 .catch(err => {
 if (isClerkAPIResponseError(err) && err.errors[0].code === 'external_account_not_found') {
 return this.client?.signUp.create({
 // TODO-ONETAP: Add new types when feature is ready for public beta
 // @ts-expect-error
 strategy: 'google_one_tap',
googleOneTapToken: params.token,
token: params.token,
 });
 }
 throw err;
Expand Down

25 changes: 1 addition & 24 deletions
packages/clerk-js/src/core/resources/SignIn.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
import { deepSnakeToCamel, isClerkAPIResponseError, Poller } from '@clerk/shared';
import { deepSnakeToCamel, Poller } from '@clerk/shared';
import type {
 __experimental_AuthenticateWithGoogleOneTapParams,
 AttemptFirstFactorParams,
 AttemptSecondFactorParams,
 AuthenticateWithPasskeyParams,
Expand All@@ -26,7 +25,6 @@ import type {
 SignInSecondFactor,
 SignInStartEmailLinkFlowParams,
 SignInStatus,
 SignUpResource,
 VerificationResource,
 Web3SignatureConfig,
 Web3SignatureFactor,
Expand DownExpand Up@@ -225,27 +223,6 @@ export class SignIn extends BaseResource implements SignInResource {
 }
 };

 public __experimental_authenticateWithGoogleOneTap = async (
 params: __experimental_AuthenticateWithGoogleOneTapParams,
 ): Promise<SignInResource | SignUpResource> => {
 return this.create({
 // TODO-ONETAP: Add new types when feature is ready for public beta
 // @ts-expect-error
 strategy: 'google_one_tap',
 googleOneTapToken: params.token,
 }).catch(err => {
 if (isClerkAPIResponseError(err) && err.errors[0].code === 'external_account_not_found') {
 return SignIn.clerk.client?.signUp.create({
 // TODO-ONETAP: Add new types when feature is ready for public beta
 // @ts-expect-error
 strategy: 'google_one_tap',
 googleOneTapToken: params.token,
 });
 }
 throw err;
 }) as Promise<SignInResource | SignUpResource>;
 };


Comment on lines

-228
 to 
-248

@panteliselefpanteliselefMay 16, 2024

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is moved to Clerk.ts
 public authenticateWithWeb3 = async (params: AuthenticateWithWeb3Params): Promise<SignInResource> => {
 const { identifier, generateSignature } = params || {};
 if (!(typeof generateSignature === 'function')) {
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/Components.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,7 +6,7 @@ import type {
 ClerkOptions,
 CreateOrganizationProps,
 EnvironmentResource,
OneTapProps,
GoogleOneTapProps,
 OrganizationProfileProps,
 SignInProps,
 SignUpProps,
Expand DownExpand Up@@ -84,7 +84,7 @@ interface ComponentsProps {
interface ComponentsState {
 appearance: Appearance | undefined;
 options: ClerkOptions | undefined;
 googleOneTapModal: null | OneTapProps;
 googleOneTapModal: null | GoogleOneTapProps;
 signInModal: null | SignInProps;
 signUpModal: null | SignUpProps;
 userProfileModal: null | UserProfileProps;
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/components/GoogleOneTap/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
import type { OneTapProps } from '@clerk/types';
import type { GoogleOneTapProps } from '@clerk/types';
import React from 'react';

import { withCoreSessionSwitchGuard } from '../../contexts';
Expand All@@ -22,4 +22,4 @@ function OneTapRoutes(): JSX.Element {

OneTapRoutes.displayName = 'OneTap';

export const OneTap: React.ComponentType<OneTapProps> = withCoreSessionSwitchGuard(OneTapRoutes);
export const OneTap: React.ComponentType<GoogleOneTapProps> = withCoreSessionSwitchGuard(OneTapRoutes);

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/components/GoogleOneTap/one-tap-start.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -29,10 +29,10 @@ function _OneTapStart(): JSX.Element | null {
 async function oneTapCallback(response: GISCredentialResponse) {
 isPromptedRef.current = false;
 try {
 const res = await clerk.__experimental_authenticateWithGoogleOneTap({
 const res = await clerk.authenticateWithGoogleOneTap({
 token: response.credential,
 });
 await clerk.__experimental_handleGoogleOneTapCallback(
 await clerk.handleGoogleOneTapCallback(
 res,
 {
 signInUrl,
Expand DownExpand Up@@ -80,7 +80,7 @@ function _OneTapStart(): JSX.Element | null {
 // Close the modal, when the user clicks outside the prompt or cancels
 if (notification.getMomentType() === 'skipped') {
 // Unmounts the component will cause the useEffect cleanup function from below to be called
 clerk.__experimental_closeGoogleOneTap();
 clerk.closeGoogleOneTap();
 }
 });
 isPromptedRef.current = true;
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -14,7 +14,7 @@ import { useRouter } from '../router';
import type {
 AvailableComponentCtx,
 CreateOrganizationCtx,
OneTapCtx,
GoogleOneTapCtx,
 OrganizationListCtx,
 OrganizationProfileCtx,
 OrganizationSwitcherCtx,
Expand DownExpand Up@@ -497,12 +497,12 @@ export const useCreateOrganizationContext = () => {
};

export const useGoogleOneTapContext = () => {
 const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as OneTapCtx;
 const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as GoogleOneTapCtx;
 const options = useOptions();
 const { displayConfig } = useEnvironment();
 const { queryParams } = useRouter();

 if (componentName !== 'OneTap') {
 if (componentName !== 'GoogleOneTap') {
 throw new Error('Clerk: useGoogleOneTapContext called outside GoogleOneTap.');
 }

Expand Down

8 changes: 5 additions & 3 deletions
packages/clerk-js/src/ui/lazyModules/components.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,13 +12,15 @@ const componentImportPaths = {
 import(/* webpackChunkName: "organizationswitcher" */ './../components/OrganizationSwitcher'),
 OrganizationList: () => import(/* webpackChunkName: "organizationlist" */ './../components/OrganizationList'),
 ImpersonationFab: () => import(/* webpackChunkName: "impersonationfab" */ './../components/ImpersonationFab'),
OneTap: () => import(/* webpackChunkName: "oneTap" */ './../components/GoogleOneTap'),
GoogleOneTap: () => import(/* webpackChunkName: "oneTap" */ './../components/GoogleOneTap'),
} as const;

export const SignIn = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignIn })));

export const SignInModal = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignInModal })));
export const OneTap = lazy(() => componentImportPaths.OneTap().then(module => ({ default: module.OneTap })));
export const GoogleOneTap = lazy(() =>
 componentImportPaths.GoogleOneTap().then(module => ({ default: module.OneTap })),
);

export const SignUp = lazy(() => componentImportPaths.SignUp().then(module => ({ default: module.SignUp })));

Expand DownExpand Up@@ -79,7 +81,7 @@ export const ClerkComponents = {
 UserProfileModal,
 OrganizationProfileModal,
 CreateOrganizationModal,
OneTap,
GoogleOneTap,
};

export type ClerkComponentName = keyof typeof ClerkComponents;

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/lazyModules/providers.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -146,9 +146,9 @@ export const LazyOneTapRenderer = (props: LazyOneTapRendererProps) => {
 >
 <VirtualBodyRootPortal
 startPath={props.startPath}
 component={ClerkComponents['OneTap']}
 component={ClerkComponents['GoogleOneTap']}
 props={props.componentProps}
 componentName={'OneTap'}
 componentName={'GoogleOneTap'}
 />
 </AppearanceProvider>
 );
Expand Down

10 changes: 5 additions & 5 deletions
packages/clerk-js/src/ui/types.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
import type {
 CreateOrganizationProps,
OneTapProps,
GoogleOneTapProps,
 OrganizationListProps,
 OrganizationProfileProps,
 OrganizationSwitcherProps,
Expand All@@ -11,7 +11,7 @@ import type {
} from '@clerk/types';

export type {
OneTapProps,
GoogleOneTapProps,
 SignInProps,
 SignUpProps,
 UserButtonProps,
Expand DownExpand Up@@ -74,8 +74,8 @@ export type OrganizationListCtx = OrganizationListProps & {
 mode?: ComponentMode;
};

export type OneTapCtx = OneTapProps & {
 componentName: 'OneTap';
export type GoogleOneTapCtx = GoogleOneTapProps & {
 componentName: 'GoogleOneTap';
};

export type AvailableComponentCtx =
Expand All@@ -87,4 +87,4 @@ export type AvailableComponentCtx =
 | CreateOrganizationCtx
 | OrganizationSwitcherCtx
 | OrganizationListCtx
 | OneTapCtx;
 | GoogleOneTapCtx;

2 changes: 1 addition & 1 deletion
packages/nextjs/src/client-boundary/uiComponents.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -26,7 +26,7 @@ export {
 SignOutButton,
 SignUpButton,
 UserButton,
__experimental_GoogleOneTap,
GoogleOneTap,
} from '@clerk/clerk-react';

// The assignment of UserProfile with BaseUserProfile props is used
Expand Down

2 changes: 1 addition & 1 deletion
packages/nextjs/src/index.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,7 +30,7 @@ export {
 SignUpButton,
 UserButton,
 UserProfile,
__experimental_GoogleOneTap,
GoogleOneTap,
} from './client-boundary/uiComponents';

/**
Expand Down

2 changes: 1 addition & 1 deletion
packages/react/src/components/index.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,7 @@ export {
 OrganizationProfile,
 CreateOrganization,
 OrganizationList,
__experimental_GoogleOneTap,
GoogleOneTap,
} from './uiComponents';

export {
Expand Down

10 changes: 5 additions & 5 deletions
packages/react/src/components/uiComponents.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,7 +2,7 @@ import { logErrorInDevMode, without } from '@clerk/shared';
import { isDeeplyEqual } from '@clerk/shared/react';
import type {
 CreateOrganizationProps,
OneTapProps,
GoogleOneTapProps,
 OrganizationListProps,
 OrganizationProfileProps,
 OrganizationSwitcherProps,
Expand DownExpand Up@@ -301,12 +301,12 @@ export const OrganizationList = withClerk(({ clerk, ...props }: WithClerkProp<Or
 );
}, 'OrganizationList');

export const __experimental_GoogleOneTap = withClerk(({ clerk, ...props }: WithClerkProp<OneTapProps>) => {
export const GoogleOneTap = withClerk(({ clerk, ...props }: WithClerkProp<GoogleOneTapProps>) => {
 return (
 <Portal
 open={clerk.__experimental_openGoogleOneTap}
 close={clerk.__experimental_closeGoogleOneTap}
 open={clerk.openGoogleOneTap}
 close={clerk.closeGoogleOneTap}
 props={props}
 />
 );
}, 'OneTap');
}, 'GoogleOneTap');
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
feat(clerk-js,clerk-react,nextjs,types): Drop experimental tag from GoogleOneTap#3392

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

 Merged

panteliselef
merged 4 commits into

from

May 20, 2024
 Merged


feat(clerk-js,clerk-react,nextjs,types): Drop experimental tag from GoogleOneTap
#3392
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
d1fc0b8

feat(clerk-js,clerk-react,nextjs,types): Drop experimental tag from G…


panteliselef May 16, 2024
33449e7

feat(clerk-js,clerk-react,nextjs,types): Add changeset


panteliselef May 16, 2024
1f5b903

test(chrome-extension): Update snapshots


panteliselef May 16, 2024
e97824f

Merge branch 'main' into elef/prepare-one-tap-for-ga


panteliselef May 20, 2024

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


53 changes: 53 additions & 0 deletions
.changeset/shiny-yaks-wave.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
---
'@clerk/clerk-js': minor
'@clerk/nextjs': minor
'@clerk/clerk-react': minor
'@clerk/types': minor
---

Add support for GoogleOneTap. New APIs listed:
### React component
- `<GoogleOneTap/>`

Customize the UX of the prompt

```tsx
<GoogleOneTap
 cancelOnTapOutside={false}
 itpSupport={false}
 fedCmSupport={false}
/>
```

### Use the component from with Vanilla JS
- `Clerk.openGoogleOneTap(props: GoogleOneTapProps)`
- `Clerk.closeGoogleOneTap()`
### Low level APIs for custom flows
- `await Clerk.authenticateWithGoogleOneTap({ token: 'xxxx'})`
- `await Clerk.handleGoogleOneTapCallback()`

We recommend using this two methods together in order and let Clerk to perform the correct redirections.
```tsx
google.accounts.id.initialize({
 callback: async response => {
 const signInOrUp = await Clerk.authenticateWithGoogleOneTap({ token: response.credential})
 await Clerk.handleGoogleOneTapCallback(signInOrUp, {
 signInForceRedirectUrl: window.location.href,
 })
 },
});
```

In case you want to handle the redirection and session management yourself you can do so like this
```tsx
google.accounts.id.initialize({
 callback: async response => {
 const signInOrUp = await Clerk.authenticateWithGoogleOneTap({ token: response.credential})
 if(signInOrUp.status === 'complete') {
 await Clerk.setActive({
 session: signInOrUp.createdSessionId
 })
 }
 },
});
```

2 changes: 1 addition & 1 deletion
packages/chrome-extension/src/__tests__/__snapshots__/exports.test.ts.snap

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,7 @@ exports[`public exports should not include a breaking change 1`] = `
 "ClerkLoading",
 "ClerkProvider",
 "CreateOrganization",
 "GoogleOneTap",
 "OrganizationList",
 "OrganizationProfile",
 "OrganizationSwitcher",
Expand All@@ -26,7 +27,6 @@ exports[`public exports should not include a breaking change 1`] = `
 "SignedOut",
 "UserButton",
 "UserProfile",
 "__experimental_GoogleOneTap",
 "useAuth",
 "useClerk",
 "useEmailLink",
Expand Down

24 changes: 10 additions & 14 deletions
packages/clerk-js/src/core/clerk.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,8 +16,8 @@ import {
} from '@clerk/shared';
import { eventPrebuiltComponentMounted, TelemetryCollector } from '@clerk/shared/telemetry';
import type {
 __experimental_AuthenticateWithGoogleOneTapParams,
 ActiveSessionResource,
 AuthenticateWithGoogleOneTapParams,
 AuthenticateWithMetamaskParams,
 Clerk as ClerkInterface,
 ClerkAPIError,
Expand All@@ -28,12 +28,12 @@ import type {
 DomainOrProxyUrl,
 EnvironmentJSON,
 EnvironmentResource,
 GoogleOneTapProps,
 HandleEmailLinkVerificationParams,
 HandleOAuthCallbackParams,
 InstanceType,
 ListenerCallback,
 NavigateOptions,
 OneTapProps,
 OrganizationListProps,
 OrganizationProfileProps,
 OrganizationResource,
Expand DownExpand Up@@ -330,14 +330,14 @@ export class Clerk implements ClerkInterface {
 }
 };

 public __experimental_openGoogleOneTap = (props?: OneTapProps): void => {
 public openGoogleOneTap = (props?: GoogleOneTapProps): void => {
 this.assertComponentsReady(this.#componentControls);
 void this.#componentControls
 .ensureMounted({ preloadHint: 'OneTap' })
 .ensureMounted({ preloadHint: 'GoogleOneTap' })
 .then(controls => controls.openModal('googleOneTap', props || {}));
 };

 public __experimental_closeGoogleOneTap = (): void => {
 public closeGoogleOneTap = (): void => {
 this.assertComponentsReady(this.#componentControls);
 void this.#componentControls.ensureMounted().then(controls => controls.closeModal('googleOneTap'));
 };
Expand DownExpand Up@@ -1003,7 +1003,7 @@ export class Clerk implements ClerkInterface {
 return null;
 };

 public __experimental_handleGoogleOneTapCallback = async (
 public handleGoogleOneTapCallback = async (
 signInOrUp: SignInResource | SignUpResource,
 params: HandleOAuthCallbackParams,
 customNavigate?: (to: string) => Promise<unknown>,
Expand DownExpand Up@@ -1263,23 +1263,19 @@ export class Clerk implements ClerkInterface {
 return this.setActive({ session: null });
 };

 public __experimental_authenticateWithGoogleOneTap = async (
 params: __experimental_AuthenticateWithGoogleOneTapParams,
 public authenticateWithGoogleOneTap = async (
 params: AuthenticateWithGoogleOneTapParams,
 ): Promise<SignInResource | SignUpResource> => {
 return this.client?.signIn
 .create({
 // TODO-ONETAP: Add new types when feature is ready for public beta
 // @ts-expect-error
 strategy: 'google_one_tap',
googleOneTapToken: params.token,
token: params.token,
 })
 .catch(err => {
 if (isClerkAPIResponseError(err) && err.errors[0].code === 'external_account_not_found') {
 return this.client?.signUp.create({
 // TODO-ONETAP: Add new types when feature is ready for public beta
 // @ts-expect-error
 strategy: 'google_one_tap',
googleOneTapToken: params.token,
token: params.token,
 });
 }
 throw err;
Expand Down

25 changes: 1 addition & 24 deletions
packages/clerk-js/src/core/resources/SignIn.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
import { deepSnakeToCamel, isClerkAPIResponseError, Poller } from '@clerk/shared';
import { deepSnakeToCamel, Poller } from '@clerk/shared';
import type {
 __experimental_AuthenticateWithGoogleOneTapParams,
 AttemptFirstFactorParams,
 AttemptSecondFactorParams,
 AuthenticateWithPasskeyParams,
Expand All@@ -26,7 +25,6 @@ import type {
 SignInSecondFactor,
 SignInStartEmailLinkFlowParams,
 SignInStatus,
 SignUpResource,
 VerificationResource,
 Web3SignatureConfig,
 Web3SignatureFactor,
Expand DownExpand Up@@ -225,27 +223,6 @@ export class SignIn extends BaseResource implements SignInResource {
 }
 };

 public __experimental_authenticateWithGoogleOneTap = async (
 params: __experimental_AuthenticateWithGoogleOneTapParams,
 ): Promise<SignInResource | SignUpResource> => {
 return this.create({
 // TODO-ONETAP: Add new types when feature is ready for public beta
 // @ts-expect-error
 strategy: 'google_one_tap',
 googleOneTapToken: params.token,
 }).catch(err => {
 if (isClerkAPIResponseError(err) && err.errors[0].code === 'external_account_not_found') {
 return SignIn.clerk.client?.signUp.create({
 // TODO-ONETAP: Add new types when feature is ready for public beta
 // @ts-expect-error
 strategy: 'google_one_tap',
 googleOneTapToken: params.token,
 });
 }
 throw err;
 }) as Promise<SignInResource | SignUpResource>;
 };


Comment on lines

-228
 to 
-248

@panteliselefpanteliselefMay 16, 2024

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is moved to Clerk.ts
 public authenticateWithWeb3 = async (params: AuthenticateWithWeb3Params): Promise<SignInResource> => {
 const { identifier, generateSignature } = params || {};
 if (!(typeof generateSignature === 'function')) {
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/Components.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,7 +6,7 @@ import type {
 ClerkOptions,
 CreateOrganizationProps,
 EnvironmentResource,
OneTapProps,
GoogleOneTapProps,
 OrganizationProfileProps,
 SignInProps,
 SignUpProps,
Expand DownExpand Up@@ -84,7 +84,7 @@ interface ComponentsProps {
interface ComponentsState {
 appearance: Appearance | undefined;
 options: ClerkOptions | undefined;
 googleOneTapModal: null | OneTapProps;
 googleOneTapModal: null | GoogleOneTapProps;
 signInModal: null | SignInProps;
 signUpModal: null | SignUpProps;
 userProfileModal: null | UserProfileProps;
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/components/GoogleOneTap/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
import type { OneTapProps } from '@clerk/types';
import type { GoogleOneTapProps } from '@clerk/types';
import React from 'react';

import { withCoreSessionSwitchGuard } from '../../contexts';
Expand All@@ -22,4 +22,4 @@ function OneTapRoutes(): JSX.Element {

OneTapRoutes.displayName = 'OneTap';

export const OneTap: React.ComponentType<OneTapProps> = withCoreSessionSwitchGuard(OneTapRoutes);
export const OneTap: React.ComponentType<GoogleOneTapProps> = withCoreSessionSwitchGuard(OneTapRoutes);

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/components/GoogleOneTap/one-tap-start.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -29,10 +29,10 @@ function _OneTapStart(): JSX.Element | null {
 async function oneTapCallback(response: GISCredentialResponse) {
 isPromptedRef.current = false;
 try {
 const res = await clerk.__experimental_authenticateWithGoogleOneTap({
 const res = await clerk.authenticateWithGoogleOneTap({
 token: response.credential,
 });
 await clerk.__experimental_handleGoogleOneTapCallback(
 await clerk.handleGoogleOneTapCallback(
 res,
 {
 signInUrl,
Expand DownExpand Up@@ -80,7 +80,7 @@ function _OneTapStart(): JSX.Element | null {
 // Close the modal, when the user clicks outside the prompt or cancels
 if (notification.getMomentType() === 'skipped') {
 // Unmounts the component will cause the useEffect cleanup function from below to be called
 clerk.__experimental_closeGoogleOneTap();
 clerk.closeGoogleOneTap();
 }
 });
 isPromptedRef.current = true;
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -14,7 +14,7 @@ import { useRouter } from '../router';
import type {
 AvailableComponentCtx,
 CreateOrganizationCtx,
OneTapCtx,
GoogleOneTapCtx,
 OrganizationListCtx,
 OrganizationProfileCtx,
 OrganizationSwitcherCtx,
Expand DownExpand Up@@ -497,12 +497,12 @@ export const useCreateOrganizationContext = () => {
};

export const useGoogleOneTapContext = () => {
 const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as OneTapCtx;
 const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as GoogleOneTapCtx;
 const options = useOptions();
 const { displayConfig } = useEnvironment();
 const { queryParams } = useRouter();

 if (componentName !== 'OneTap') {
 if (componentName !== 'GoogleOneTap') {
 throw new Error('Clerk: useGoogleOneTapContext called outside GoogleOneTap.');
 }

Expand Down

8 changes: 5 additions & 3 deletions
packages/clerk-js/src/ui/lazyModules/components.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,13 +12,15 @@ const componentImportPaths = {
 import(/* webpackChunkName: "organizationswitcher" */ './../components/OrganizationSwitcher'),
 OrganizationList: () => import(/* webpackChunkName: "organizationlist" */ './../components/OrganizationList'),
 ImpersonationFab: () => import(/* webpackChunkName: "impersonationfab" */ './../components/ImpersonationFab'),
OneTap: () => import(/* webpackChunkName: "oneTap" */ './../components/GoogleOneTap'),
GoogleOneTap: () => import(/* webpackChunkName: "oneTap" */ './../components/GoogleOneTap'),
} as const;

export const SignIn = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignIn })));

export const SignInModal = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignInModal })));
export const OneTap = lazy(() => componentImportPaths.OneTap().then(module => ({ default: module.OneTap })));
export const GoogleOneTap = lazy(() =>
 componentImportPaths.GoogleOneTap().then(module => ({ default: module.OneTap })),
);

export const SignUp = lazy(() => componentImportPaths.SignUp().then(module => ({ default: module.SignUp })));

Expand DownExpand Up@@ -79,7 +81,7 @@ export const ClerkComponents = {
 UserProfileModal,
 OrganizationProfileModal,
 CreateOrganizationModal,
OneTap,
GoogleOneTap,
};

export type ClerkComponentName = keyof typeof ClerkComponents;

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/lazyModules/providers.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -146,9 +146,9 @@ export const LazyOneTapRenderer = (props: LazyOneTapRendererProps) => {
 >
 <VirtualBodyRootPortal
 startPath={props.startPath}
 component={ClerkComponents['OneTap']}
 component={ClerkComponents['GoogleOneTap']}
 props={props.componentProps}
 componentName={'OneTap'}
 componentName={'GoogleOneTap'}
 />
 </AppearanceProvider>
 );
Expand Down

10 changes: 5 additions & 5 deletions
packages/clerk-js/src/ui/types.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
import type {
 CreateOrganizationProps,
OneTapProps,
GoogleOneTapProps,
 OrganizationListProps,
 OrganizationProfileProps,
 OrganizationSwitcherProps,
Expand All@@ -11,7 +11,7 @@ import type {
} from '@clerk/types';

export type {
OneTapProps,
GoogleOneTapProps,
 SignInProps,
 SignUpProps,
 UserButtonProps,
Expand DownExpand Up@@ -74,8 +74,8 @@ export type OrganizationListCtx = OrganizationListProps & {
 mode?: ComponentMode;
};

export type OneTapCtx = OneTapProps & {
 componentName: 'OneTap';
export type GoogleOneTapCtx = GoogleOneTapProps & {
 componentName: 'GoogleOneTap';
};

export type AvailableComponentCtx =
Expand All@@ -87,4 +87,4 @@ export type AvailableComponentCtx =
 | CreateOrganizationCtx
 | OrganizationSwitcherCtx
 | OrganizationListCtx
 | OneTapCtx;
 | GoogleOneTapCtx;

2 changes: 1 addition & 1 deletion
packages/nextjs/src/client-boundary/uiComponents.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -26,7 +26,7 @@ export {
 SignOutButton,
 SignUpButton,
 UserButton,
__experimental_GoogleOneTap,
GoogleOneTap,
} from '@clerk/clerk-react';

// The assignment of UserProfile with BaseUserProfile props is used
Expand Down

2 changes: 1 addition & 1 deletion
packages/nextjs/src/index.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,7 +30,7 @@ export {
 SignUpButton,
 UserButton,
 UserProfile,
__experimental_GoogleOneTap,
GoogleOneTap,
} from './client-boundary/uiComponents';

/**
Expand Down

2 changes: 1 addition & 1 deletion
packages/react/src/components/index.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,7 @@ export {
 OrganizationProfile,
 CreateOrganization,
 OrganizationList,
__experimental_GoogleOneTap,
GoogleOneTap,
} from './uiComponents';

export {
Expand Down

10 changes: 5 additions & 5 deletions
packages/react/src/components/uiComponents.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,7 +2,7 @@ import { logErrorInDevMode, without } from '@clerk/shared';
import { isDeeplyEqual } from '@clerk/shared/react';
import type {
 CreateOrganizationProps,
OneTapProps,
GoogleOneTapProps,
 OrganizationListProps,
 OrganizationProfileProps,
 OrganizationSwitcherProps,
Expand DownExpand Up@@ -301,12 +301,12 @@ export const OrganizationList = withClerk(({ clerk, ...props }: WithClerkProp<Or
 );
}, 'OrganizationList');

export const __experimental_GoogleOneTap = withClerk(({ clerk, ...props }: WithClerkProp<OneTapProps>) => {
export const GoogleOneTap = withClerk(({ clerk, ...props }: WithClerkProp<GoogleOneTapProps>) => {
 return (
 <Portal
 open={clerk.__experimental_openGoogleOneTap}
 close={clerk.__experimental_closeGoogleOneTap}
 open={clerk.openGoogleOneTap}
 close={clerk.closeGoogleOneTap}
 props={props}
 />
 );
}, 'OneTap');
}, 'GoogleOneTap');
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(clerk-js,clerk-react,nextjs,types): Drop experimental tag from GoogleOneTap#3392

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

 Merged

panteliselef
merged 4 commits into

from

May 20, 2024
 Merged


feat(clerk-js,clerk-react,nextjs,types): Drop experimental tag from GoogleOneTap
#3392
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
d1fc0b8

feat(clerk-js,clerk-react,nextjs,types): Drop experimental tag from G…


panteliselef May 16, 2024
33449e7

feat(clerk-js,clerk-react,nextjs,types): Add changeset


panteliselef May 16, 2024
1f5b903

test(chrome-extension): Update snapshots


panteliselef May 16, 2024
e97824f

Merge branch 'main' into elef/prepare-one-tap-for-ga


panteliselef May 20, 2024

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


53 changes: 53 additions & 0 deletions
.changeset/shiny-yaks-wave.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
---
'@clerk/clerk-js': minor
'@clerk/nextjs': minor
'@clerk/clerk-react': minor
'@clerk/types': minor
---

Add support for GoogleOneTap. New APIs listed:
### React component
- `<GoogleOneTap/>`

Customize the UX of the prompt

```tsx
<GoogleOneTap
 cancelOnTapOutside={false}
 itpSupport={false}
 fedCmSupport={false}
/>
```

### Use the component from with Vanilla JS
- `Clerk.openGoogleOneTap(props: GoogleOneTapProps)`
- `Clerk.closeGoogleOneTap()`
### Low level APIs for custom flows
- `await Clerk.authenticateWithGoogleOneTap({ token: 'xxxx'})`
- `await Clerk.handleGoogleOneTapCallback()`

We recommend using this two methods together in order and let Clerk to perform the correct redirections.
```tsx
google.accounts.id.initialize({
 callback: async response => {
 const signInOrUp = await Clerk.authenticateWithGoogleOneTap({ token: response.credential})
 await Clerk.handleGoogleOneTapCallback(signInOrUp, {
 signInForceRedirectUrl: window.location.href,
 })
 },
});
```

In case you want to handle the redirection and session management yourself you can do so like this
```tsx
google.accounts.id.initialize({
 callback: async response => {
 const signInOrUp = await Clerk.authenticateWithGoogleOneTap({ token: response.credential})
 if(signInOrUp.status === 'complete') {
 await Clerk.setActive({
 session: signInOrUp.createdSessionId
 })
 }
 },
});
```

2 changes: 1 addition & 1 deletion
packages/chrome-extension/src/__tests__/__snapshots__/exports.test.ts.snap

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,7 @@ exports[`public exports should not include a breaking change 1`] = `
 "ClerkLoading",
 "ClerkProvider",
 "CreateOrganization",
 "GoogleOneTap",
 "OrganizationList",
 "OrganizationProfile",
 "OrganizationSwitcher",
Expand All@@ -26,7 +27,6 @@ exports[`public exports should not include a breaking change 1`] = `
 "SignedOut",
 "UserButton",
 "UserProfile",
 "__experimental_GoogleOneTap",
 "useAuth",
 "useClerk",
 "useEmailLink",
Expand Down

24 changes: 10 additions & 14 deletions
packages/clerk-js/src/core/clerk.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,8 +16,8 @@ import {
} from '@clerk/shared';
import { eventPrebuiltComponentMounted, TelemetryCollector } from '@clerk/shared/telemetry';
import type {
 __experimental_AuthenticateWithGoogleOneTapParams,
 ActiveSessionResource,
 AuthenticateWithGoogleOneTapParams,
 AuthenticateWithMetamaskParams,
 Clerk as ClerkInterface,
 ClerkAPIError,
Expand All@@ -28,12 +28,12 @@ import type {
 DomainOrProxyUrl,
 EnvironmentJSON,
 EnvironmentResource,
 GoogleOneTapProps,
 HandleEmailLinkVerificationParams,
 HandleOAuthCallbackParams,
 InstanceType,
 ListenerCallback,
 NavigateOptions,
 OneTapProps,
 OrganizationListProps,
 OrganizationProfileProps,
 OrganizationResource,
Expand DownExpand Up@@ -330,14 +330,14 @@ export class Clerk implements ClerkInterface {
 }
 };

 public __experimental_openGoogleOneTap = (props?: OneTapProps): void => {
 public openGoogleOneTap = (props?: GoogleOneTapProps): void => {
 this.assertComponentsReady(this.#componentControls);
 void this.#componentControls
 .ensureMounted({ preloadHint: 'OneTap' })
 .ensureMounted({ preloadHint: 'GoogleOneTap' })
 .then(controls => controls.openModal('googleOneTap', props || {}));
 };

 public __experimental_closeGoogleOneTap = (): void => {
 public closeGoogleOneTap = (): void => {
 this.assertComponentsReady(this.#componentControls);
 void this.#componentControls.ensureMounted().then(controls => controls.closeModal('googleOneTap'));
 };
Expand DownExpand Up@@ -1003,7 +1003,7 @@ export class Clerk implements ClerkInterface {
 return null;
 };

 public __experimental_handleGoogleOneTapCallback = async (
 public handleGoogleOneTapCallback = async (
 signInOrUp: SignInResource | SignUpResource,
 params: HandleOAuthCallbackParams,
 customNavigate?: (to: string) => Promise<unknown>,
Expand DownExpand Up@@ -1263,23 +1263,19 @@ export class Clerk implements ClerkInterface {
 return this.setActive({ session: null });
 };

 public __experimental_authenticateWithGoogleOneTap = async (
 params: __experimental_AuthenticateWithGoogleOneTapParams,
 public authenticateWithGoogleOneTap = async (
 params: AuthenticateWithGoogleOneTapParams,
 ): Promise<SignInResource | SignUpResource> => {
 return this.client?.signIn
 .create({
 // TODO-ONETAP: Add new types when feature is ready for public beta
 // @ts-expect-error
 strategy: 'google_one_tap',
googleOneTapToken: params.token,
token: params.token,
 })
 .catch(err => {
 if (isClerkAPIResponseError(err) && err.errors[0].code === 'external_account_not_found') {
 return this.client?.signUp.create({
 // TODO-ONETAP: Add new types when feature is ready for public beta
 // @ts-expect-error
 strategy: 'google_one_tap',
googleOneTapToken: params.token,
token: params.token,
 });
 }
 throw err;
Expand Down

25 changes: 1 addition & 24 deletions
packages/clerk-js/src/core/resources/SignIn.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
import { deepSnakeToCamel, isClerkAPIResponseError, Poller } from '@clerk/shared';
import { deepSnakeToCamel, Poller } from '@clerk/shared';
import type {
 __experimental_AuthenticateWithGoogleOneTapParams,
 AttemptFirstFactorParams,
 AttemptSecondFactorParams,
 AuthenticateWithPasskeyParams,
Expand All@@ -26,7 +25,6 @@ import type {
 SignInSecondFactor,
 SignInStartEmailLinkFlowParams,
 SignInStatus,
 SignUpResource,
 VerificationResource,
 Web3SignatureConfig,
 Web3SignatureFactor,
Expand DownExpand Up@@ -225,27 +223,6 @@ export class SignIn extends BaseResource implements SignInResource {
 }
 };

 public __experimental_authenticateWithGoogleOneTap = async (
 params: __experimental_AuthenticateWithGoogleOneTapParams,
 ): Promise<SignInResource | SignUpResource> => {
 return this.create({
 // TODO-ONETAP: Add new types when feature is ready for public beta
 // @ts-expect-error
 strategy: 'google_one_tap',
 googleOneTapToken: params.token,
 }).catch(err => {
 if (isClerkAPIResponseError(err) && err.errors[0].code === 'external_account_not_found') {
 return SignIn.clerk.client?.signUp.create({
 // TODO-ONETAP: Add new types when feature is ready for public beta
 // @ts-expect-error
 strategy: 'google_one_tap',
 googleOneTapToken: params.token,
 });
 }
 throw err;
 }) as Promise<SignInResource | SignUpResource>;
 };


Comment on lines

-228
 to 
-248

@panteliselefpanteliselefMay 16, 2024

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is moved to Clerk.ts
 public authenticateWithWeb3 = async (params: AuthenticateWithWeb3Params): Promise<SignInResource> => {
 const { identifier, generateSignature } = params || {};
 if (!(typeof generateSignature === 'function')) {
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/Components.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,7 +6,7 @@ import type {
 ClerkOptions,
 CreateOrganizationProps,
 EnvironmentResource,
OneTapProps,
GoogleOneTapProps,
 OrganizationProfileProps,
 SignInProps,
 SignUpProps,
Expand DownExpand Up@@ -84,7 +84,7 @@ interface ComponentsProps {
interface ComponentsState {
 appearance: Appearance | undefined;
 options: ClerkOptions | undefined;
 googleOneTapModal: null | OneTapProps;
 googleOneTapModal: null | GoogleOneTapProps;
 signInModal: null | SignInProps;
 signUpModal: null | SignUpProps;
 userProfileModal: null | UserProfileProps;
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/components/GoogleOneTap/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
import type { OneTapProps } from '@clerk/types';
import type { GoogleOneTapProps } from '@clerk/types';
import React from 'react';

import { withCoreSessionSwitchGuard } from '../../contexts';
Expand All@@ -22,4 +22,4 @@ function OneTapRoutes(): JSX.Element {

OneTapRoutes.displayName = 'OneTap';

export const OneTap: React.ComponentType<OneTapProps> = withCoreSessionSwitchGuard(OneTapRoutes);
export const OneTap: React.ComponentType<GoogleOneTapProps> = withCoreSessionSwitchGuard(OneTapRoutes);

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/components/GoogleOneTap/one-tap-start.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -29,10 +29,10 @@ function _OneTapStart(): JSX.Element | null {
 async function oneTapCallback(response: GISCredentialResponse) {
 isPromptedRef.current = false;
 try {
 const res = await clerk.__experimental_authenticateWithGoogleOneTap({
 const res = await clerk.authenticateWithGoogleOneTap({
 token: response.credential,
 });
 await clerk.__experimental_handleGoogleOneTapCallback(
 await clerk.handleGoogleOneTapCallback(
 res,
 {
 signInUrl,
Expand DownExpand Up@@ -80,7 +80,7 @@ function _OneTapStart(): JSX.Element | null {
 // Close the modal, when the user clicks outside the prompt or cancels
 if (notification.getMomentType() === 'skipped') {
 // Unmounts the component will cause the useEffect cleanup function from below to be called
 clerk.__experimental_closeGoogleOneTap();
 clerk.closeGoogleOneTap();
 }
 });
 isPromptedRef.current = true;
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -14,7 +14,7 @@ import { useRouter } from '../router';
import type {
 AvailableComponentCtx,
 CreateOrganizationCtx,
OneTapCtx,
GoogleOneTapCtx,
 OrganizationListCtx,
 OrganizationProfileCtx,
 OrganizationSwitcherCtx,
Expand DownExpand Up@@ -497,12 +497,12 @@ export const useCreateOrganizationContext = () => {
};

export const useGoogleOneTapContext = () => {
 const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as OneTapCtx;
 const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as GoogleOneTapCtx;
 const options = useOptions();
 const { displayConfig } = useEnvironment();
 const { queryParams } = useRouter();

 if (componentName !== 'OneTap') {
 if (componentName !== 'GoogleOneTap') {
 throw new Error('Clerk: useGoogleOneTapContext called outside GoogleOneTap.');
 }

Expand Down

8 changes: 5 additions & 3 deletions
packages/clerk-js/src/ui/lazyModules/components.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,13 +12,15 @@ const componentImportPaths = {
 import(/* webpackChunkName: "organizationswitcher" */ './../components/OrganizationSwitcher'),
 OrganizationList: () => import(/* webpackChunkName: "organizationlist" */ './../components/OrganizationList'),
 ImpersonationFab: () => import(/* webpackChunkName: "impersonationfab" */ './../components/ImpersonationFab'),
OneTap: () => import(/* webpackChunkName: "oneTap" */ './../components/GoogleOneTap'),
GoogleOneTap: () => import(/* webpackChunkName: "oneTap" */ './../components/GoogleOneTap'),
} as const;

export const SignIn = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignIn })));

export const SignInModal = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignInModal })));
export const OneTap = lazy(() => componentImportPaths.OneTap().then(module => ({ default: module.OneTap })));
export const GoogleOneTap = lazy(() =>
 componentImportPaths.GoogleOneTap().then(module => ({ default: module.OneTap })),
);

export const SignUp = lazy(() => componentImportPaths.SignUp().then(module => ({ default: module.SignUp })));

Expand DownExpand Up@@ -79,7 +81,7 @@ export const ClerkComponents = {
 UserProfileModal,
 OrganizationProfileModal,
 CreateOrganizationModal,
OneTap,
GoogleOneTap,
};

export type ClerkComponentName = keyof typeof ClerkComponents;

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/lazyModules/providers.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -146,9 +146,9 @@ export const LazyOneTapRenderer = (props: LazyOneTapRendererProps) => {
 >
 <VirtualBodyRootPortal
 startPath={props.startPath}
 component={ClerkComponents['OneTap']}
 component={ClerkComponents['GoogleOneTap']}
 props={props.componentProps}
 componentName={'OneTap'}
 componentName={'GoogleOneTap'}
 />
 </AppearanceProvider>
 );
Expand Down

10 changes: 5 additions & 5 deletions
packages/clerk-js/src/ui/types.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
import type {
 CreateOrganizationProps,
OneTapProps,
GoogleOneTapProps,
 OrganizationListProps,
 OrganizationProfileProps,
 OrganizationSwitcherProps,
Expand All@@ -11,7 +11,7 @@ import type {
} from '@clerk/types';

export type {
OneTapProps,
GoogleOneTapProps,
 SignInProps,
 SignUpProps,
 UserButtonProps,
Expand DownExpand Up@@ -74,8 +74,8 @@ export type OrganizationListCtx = OrganizationListProps & {
 mode?: ComponentMode;
};

export type OneTapCtx = OneTapProps & {
 componentName: 'OneTap';
export type GoogleOneTapCtx = GoogleOneTapProps & {
 componentName: 'GoogleOneTap';
};

export type AvailableComponentCtx =
Expand All@@ -87,4 +87,4 @@ export type AvailableComponentCtx =
 | CreateOrganizationCtx
 | OrganizationSwitcherCtx
 | OrganizationListCtx
 | OneTapCtx;
 | GoogleOneTapCtx;

2 changes: 1 addition & 1 deletion
packages/nextjs/src/client-boundary/uiComponents.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -26,7 +26,7 @@ export {
 SignOutButton,
 SignUpButton,
 UserButton,
__experimental_GoogleOneTap,
GoogleOneTap,
} from '@clerk/clerk-react';

// The assignment of UserProfile with BaseUserProfile props is used
Expand Down

2 changes: 1 addition & 1 deletion
packages/nextjs/src/index.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,7 +30,7 @@ export {
 SignUpButton,
 UserButton,
 UserProfile,
__experimental_GoogleOneTap,
GoogleOneTap,
} from './client-boundary/uiComponents';

/**
Expand Down

2 changes: 1 addition & 1 deletion
packages/react/src/components/index.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,7 @@ export {
 OrganizationProfile,
 CreateOrganization,
 OrganizationList,
__experimental_GoogleOneTap,
GoogleOneTap,
} from './uiComponents';

export {
Expand Down

10 changes: 5 additions & 5 deletions
packages/react/src/components/uiComponents.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,7 +2,7 @@ import { logErrorInDevMode, without } from '@clerk/shared';
import { isDeeplyEqual } from '@clerk/shared/react';
import type {
 CreateOrganizationProps,
OneTapProps,
GoogleOneTapProps,
 OrganizationListProps,
 OrganizationProfileProps,
 OrganizationSwitcherProps,
Expand DownExpand Up@@ -301,12 +301,12 @@ export const OrganizationList = withClerk(({ clerk, ...props }: WithClerkProp<Or
 );
}, 'OrganizationList');

export const __experimental_GoogleOneTap = withClerk(({ clerk, ...props }: WithClerkProp<OneTapProps>) => {
export const GoogleOneTap = withClerk(({ clerk, ...props }: WithClerkProp<GoogleOneTapProps>) => {
 return (
 <Portal
 open={clerk.__experimental_openGoogleOneTap}
 close={clerk.__experimental_closeGoogleOneTap}
 open={clerk.openGoogleOneTap}
 close={clerk.closeGoogleOneTap}
 props={props}
 />
 );
}, 'OneTap');
}, 'GoogleOneTap');
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(clerk-js,clerk-react,nextjs,types): Drop experimental tag from GoogleOneTap#3392

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

 Merged

panteliselef
merged 4 commits into

from

May 20, 2024
 Merged


feat(clerk-js,clerk-react,nextjs,types): Drop experimental tag from GoogleOneTap
#3392
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
d1fc0b8

feat(clerk-js,clerk-react,nextjs,types): Drop experimental tag from G…


panteliselef May 16, 2024
33449e7

feat(clerk-js,clerk-react,nextjs,types): Add changeset


panteliselef May 16, 2024
1f5b903

test(chrome-extension): Update snapshots


panteliselef May 16, 2024
e97824f

Merge branch 'main' into elef/prepare-one-tap-for-ga


panteliselef May 20, 2024

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


53 changes: 53 additions & 0 deletions
.changeset/shiny-yaks-wave.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
---
'@clerk/clerk-js': minor
'@clerk/nextjs': minor
'@clerk/clerk-react': minor
'@clerk/types': minor
---

Add support for GoogleOneTap. New APIs listed:
### React component
- `<GoogleOneTap/>`

Customize the UX of the prompt

```tsx
<GoogleOneTap
 cancelOnTapOutside={false}
 itpSupport={false}
 fedCmSupport={false}
/>
```

### Use the component from with Vanilla JS
- `Clerk.openGoogleOneTap(props: GoogleOneTapProps)`
- `Clerk.closeGoogleOneTap()`
### Low level APIs for custom flows
- `await Clerk.authenticateWithGoogleOneTap({ token: 'xxxx'})`
- `await Clerk.handleGoogleOneTapCallback()`

We recommend using this two methods together in order and let Clerk to perform the correct redirections.
```tsx
google.accounts.id.initialize({
 callback: async response => {
 const signInOrUp = await Clerk.authenticateWithGoogleOneTap({ token: response.credential})
 await Clerk.handleGoogleOneTapCallback(signInOrUp, {
 signInForceRedirectUrl: window.location.href,
 })
 },
});
```

In case you want to handle the redirection and session management yourself you can do so like this
```tsx
google.accounts.id.initialize({
 callback: async response => {
 const signInOrUp = await Clerk.authenticateWithGoogleOneTap({ token: response.credential})
 if(signInOrUp.status === 'complete') {
 await Clerk.setActive({
 session: signInOrUp.createdSessionId
 })
 }
 },
});
```

2 changes: 1 addition & 1 deletion
packages/chrome-extension/src/__tests__/__snapshots__/exports.test.ts.snap

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,7 @@ exports[`public exports should not include a breaking change 1`] = `
 "ClerkLoading",
 "ClerkProvider",
 "CreateOrganization",
 "GoogleOneTap",
 "OrganizationList",
 "OrganizationProfile",
 "OrganizationSwitcher",
Expand All@@ -26,7 +27,6 @@ exports[`public exports should not include a breaking change 1`] = `
 "SignedOut",
 "UserButton",
 "UserProfile",
 "__experimental_GoogleOneTap",
 "useAuth",
 "useClerk",
 "useEmailLink",
Expand Down

24 changes: 10 additions & 14 deletions
packages/clerk-js/src/core/clerk.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,8 +16,8 @@ import {
} from '@clerk/shared';
import { eventPrebuiltComponentMounted, TelemetryCollector } from '@clerk/shared/telemetry';
import type {
 __experimental_AuthenticateWithGoogleOneTapParams,
 ActiveSessionResource,
 AuthenticateWithGoogleOneTapParams,
 AuthenticateWithMetamaskParams,
 Clerk as ClerkInterface,
 ClerkAPIError,
Expand All@@ -28,12 +28,12 @@ import type {
 DomainOrProxyUrl,
 EnvironmentJSON,
 EnvironmentResource,
 GoogleOneTapProps,
 HandleEmailLinkVerificationParams,
 HandleOAuthCallbackParams,
 InstanceType,
 ListenerCallback,
 NavigateOptions,
 OneTapProps,
 OrganizationListProps,
 OrganizationProfileProps,
 OrganizationResource,
Expand DownExpand Up@@ -330,14 +330,14 @@ export class Clerk implements ClerkInterface {
 }
 };

 public __experimental_openGoogleOneTap = (props?: OneTapProps): void => {
 public openGoogleOneTap = (props?: GoogleOneTapProps): void => {
 this.assertComponentsReady(this.#componentControls);
 void this.#componentControls
 .ensureMounted({ preloadHint: 'OneTap' })
 .ensureMounted({ preloadHint: 'GoogleOneTap' })
 .then(controls => controls.openModal('googleOneTap', props || {}));
 };

 public __experimental_closeGoogleOneTap = (): void => {
 public closeGoogleOneTap = (): void => {
 this.assertComponentsReady(this.#componentControls);
 void this.#componentControls.ensureMounted().then(controls => controls.closeModal('googleOneTap'));
 };
Expand DownExpand Up@@ -1003,7 +1003,7 @@ export class Clerk implements ClerkInterface {
 return null;
 };

 public __experimental_handleGoogleOneTapCallback = async (
 public handleGoogleOneTapCallback = async (
 signInOrUp: SignInResource | SignUpResource,
 params: HandleOAuthCallbackParams,
 customNavigate?: (to: string) => Promise<unknown>,
Expand DownExpand Up@@ -1263,23 +1263,19 @@ export class Clerk implements ClerkInterface {
 return this.setActive({ session: null });
 };

 public __experimental_authenticateWithGoogleOneTap = async (
 params: __experimental_AuthenticateWithGoogleOneTapParams,
 public authenticateWithGoogleOneTap = async (
 params: AuthenticateWithGoogleOneTapParams,
 ): Promise<SignInResource | SignUpResource> => {
 return this.client?.signIn
 .create({
 // TODO-ONETAP: Add new types when feature is ready for public beta
 // @ts-expect-error
 strategy: 'google_one_tap',
googleOneTapToken: params.token,
token: params.token,
 })
 .catch(err => {
 if (isClerkAPIResponseError(err) && err.errors[0].code === 'external_account_not_found') {
 return this.client?.signUp.create({
 // TODO-ONETAP: Add new types when feature is ready for public beta
 // @ts-expect-error
 strategy: 'google_one_tap',
googleOneTapToken: params.token,
token: params.token,
 });
 }
 throw err;
Expand Down

25 changes: 1 addition & 24 deletions
packages/clerk-js/src/core/resources/SignIn.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
import { deepSnakeToCamel, isClerkAPIResponseError, Poller } from '@clerk/shared';
import { deepSnakeToCamel, Poller } from '@clerk/shared';
import type {
 __experimental_AuthenticateWithGoogleOneTapParams,
 AttemptFirstFactorParams,
 AttemptSecondFactorParams,
 AuthenticateWithPasskeyParams,
Expand All@@ -26,7 +25,6 @@ import type {
 SignInSecondFactor,
 SignInStartEmailLinkFlowParams,
 SignInStatus,
 SignUpResource,
 VerificationResource,
 Web3SignatureConfig,
 Web3SignatureFactor,
Expand DownExpand Up@@ -225,27 +223,6 @@ export class SignIn extends BaseResource implements SignInResource {
 }
 };

 public __experimental_authenticateWithGoogleOneTap = async (
 params: __experimental_AuthenticateWithGoogleOneTapParams,
 ): Promise<SignInResource | SignUpResource> => {
 return this.create({
 // TODO-ONETAP: Add new types when feature is ready for public beta
 // @ts-expect-error
 strategy: 'google_one_tap',
 googleOneTapToken: params.token,
 }).catch(err => {
 if (isClerkAPIResponseError(err) && err.errors[0].code === 'external_account_not_found') {
 return SignIn.clerk.client?.signUp.create({
 // TODO-ONETAP: Add new types when feature is ready for public beta
 // @ts-expect-error
 strategy: 'google_one_tap',
 googleOneTapToken: params.token,
 });
 }
 throw err;
 }) as Promise<SignInResource | SignUpResource>;
 };


Comment on lines

-228
 to 
-248

@panteliselefpanteliselefMay 16, 2024

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is moved to Clerk.ts
 public authenticateWithWeb3 = async (params: AuthenticateWithWeb3Params): Promise<SignInResource> => {
 const { identifier, generateSignature } = params || {};
 if (!(typeof generateSignature === 'function')) {
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/Components.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,7 +6,7 @@ import type {
 ClerkOptions,
 CreateOrganizationProps,
 EnvironmentResource,
OneTapProps,
GoogleOneTapProps,
 OrganizationProfileProps,
 SignInProps,
 SignUpProps,
Expand DownExpand Up@@ -84,7 +84,7 @@ interface ComponentsProps {
interface ComponentsState {
 appearance: Appearance | undefined;
 options: ClerkOptions | undefined;
 googleOneTapModal: null | OneTapProps;
 googleOneTapModal: null | GoogleOneTapProps;
 signInModal: null | SignInProps;
 signUpModal: null | SignUpProps;
 userProfileModal: null | UserProfileProps;
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/components/GoogleOneTap/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
import type { OneTapProps } from '@clerk/types';
import type { GoogleOneTapProps } from '@clerk/types';
import React from 'react';

import { withCoreSessionSwitchGuard } from '../../contexts';
Expand All@@ -22,4 +22,4 @@ function OneTapRoutes(): JSX.Element {

OneTapRoutes.displayName = 'OneTap';

export const OneTap: React.ComponentType<OneTapProps> = withCoreSessionSwitchGuard(OneTapRoutes);
export const OneTap: React.ComponentType<GoogleOneTapProps> = withCoreSessionSwitchGuard(OneTapRoutes);

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/components/GoogleOneTap/one-tap-start.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -29,10 +29,10 @@ function _OneTapStart(): JSX.Element | null {
 async function oneTapCallback(response: GISCredentialResponse) {
 isPromptedRef.current = false;
 try {
 const res = await clerk.__experimental_authenticateWithGoogleOneTap({
 const res = await clerk.authenticateWithGoogleOneTap({
 token: response.credential,
 });
 await clerk.__experimental_handleGoogleOneTapCallback(
 await clerk.handleGoogleOneTapCallback(
 res,
 {
 signInUrl,
Expand DownExpand Up@@ -80,7 +80,7 @@ function _OneTapStart(): JSX.Element | null {
 // Close the modal, when the user clicks outside the prompt or cancels
 if (notification.getMomentType() === 'skipped') {
 // Unmounts the component will cause the useEffect cleanup function from below to be called
 clerk.__experimental_closeGoogleOneTap();
 clerk.closeGoogleOneTap();
 }
 });
 isPromptedRef.current = true;
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -14,7 +14,7 @@ import { useRouter } from '../router';
import type {
 AvailableComponentCtx,
 CreateOrganizationCtx,
OneTapCtx,
GoogleOneTapCtx,
 OrganizationListCtx,
 OrganizationProfileCtx,
 OrganizationSwitcherCtx,
Expand DownExpand Up@@ -497,12 +497,12 @@ export const useCreateOrganizationContext = () => {
};

export const useGoogleOneTapContext = () => {
 const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as OneTapCtx;
 const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as GoogleOneTapCtx;
 const options = useOptions();
 const { displayConfig } = useEnvironment();
 const { queryParams } = useRouter();

 if (componentName !== 'OneTap') {
 if (componentName !== 'GoogleOneTap') {
 throw new Error('Clerk: useGoogleOneTapContext called outside GoogleOneTap.');
 }

Expand Down

8 changes: 5 additions & 3 deletions
packages/clerk-js/src/ui/lazyModules/components.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,13 +12,15 @@ const componentImportPaths = {
 import(/* webpackChunkName: "organizationswitcher" */ './../components/OrganizationSwitcher'),
 OrganizationList: () => import(/* webpackChunkName: "organizationlist" */ './../components/OrganizationList'),
 ImpersonationFab: () => import(/* webpackChunkName: "impersonationfab" */ './../components/ImpersonationFab'),
OneTap: () => import(/* webpackChunkName: "oneTap" */ './../components/GoogleOneTap'),
GoogleOneTap: () => import(/* webpackChunkName: "oneTap" */ './../components/GoogleOneTap'),
} as const;

export const SignIn = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignIn })));

export const SignInModal = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignInModal })));
export const OneTap = lazy(() => componentImportPaths.OneTap().then(module => ({ default: module.OneTap })));
export const GoogleOneTap = lazy(() =>
 componentImportPaths.GoogleOneTap().then(module => ({ default: module.OneTap })),
);

export const SignUp = lazy(() => componentImportPaths.SignUp().then(module => ({ default: module.SignUp })));

Expand DownExpand Up@@ -79,7 +81,7 @@ export const ClerkComponents = {
 UserProfileModal,
 OrganizationProfileModal,
 CreateOrganizationModal,
OneTap,
GoogleOneTap,
};

export type ClerkComponentName = keyof typeof ClerkComponents;

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/lazyModules/providers.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -146,9 +146,9 @@ export const LazyOneTapRenderer = (props: LazyOneTapRendererProps) => {
 >
 <VirtualBodyRootPortal
 startPath={props.startPath}
 component={ClerkComponents['OneTap']}
 component={ClerkComponents['GoogleOneTap']}
 props={props.componentProps}
 componentName={'OneTap'}
 componentName={'GoogleOneTap'}
 />
 </AppearanceProvider>
 );
Expand Down

10 changes: 5 additions & 5 deletions
packages/clerk-js/src/ui/types.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
import type {
 CreateOrganizationProps,
OneTapProps,
GoogleOneTapProps,
 OrganizationListProps,
 OrganizationProfileProps,
 OrganizationSwitcherProps,
Expand All@@ -11,7 +11,7 @@ import type {
} from '@clerk/types';

export type {
OneTapProps,
GoogleOneTapProps,
 SignInProps,
 SignUpProps,
 UserButtonProps,
Expand DownExpand Up@@ -74,8 +74,8 @@ export type OrganizationListCtx = OrganizationListProps & {
 mode?: ComponentMode;
};

export type OneTapCtx = OneTapProps & {
 componentName: 'OneTap';
export type GoogleOneTapCtx = GoogleOneTapProps & {
 componentName: 'GoogleOneTap';
};

export type AvailableComponentCtx =
Expand All@@ -87,4 +87,4 @@ export type AvailableComponentCtx =
 | CreateOrganizationCtx
 | OrganizationSwitcherCtx
 | OrganizationListCtx
 | OneTapCtx;
 | GoogleOneTapCtx;

2 changes: 1 addition & 1 deletion
packages/nextjs/src/client-boundary/uiComponents.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -26,7 +26,7 @@ export {
 SignOutButton,
 SignUpButton,
 UserButton,
__experimental_GoogleOneTap,
GoogleOneTap,
} from '@clerk/clerk-react';

// The assignment of UserProfile with BaseUserProfile props is used
Expand Down

2 changes: 1 addition & 1 deletion
packages/nextjs/src/index.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,7 +30,7 @@ export {
 SignUpButton,
 UserButton,
 UserProfile,
__experimental_GoogleOneTap,
GoogleOneTap,
} from './client-boundary/uiComponents';

/**
Expand Down

2 changes: 1 addition & 1 deletion
packages/react/src/components/index.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,7 @@ export {
 OrganizationProfile,
 CreateOrganization,
 OrganizationList,
__experimental_GoogleOneTap,
GoogleOneTap,
} from './uiComponents';

export {
Expand Down

10 changes: 5 additions & 5 deletions
packages/react/src/components/uiComponents.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,7 +2,7 @@ import { logErrorInDevMode, without } from '@clerk/shared';
import { isDeeplyEqual } from '@clerk/shared/react';
import type {
 CreateOrganizationProps,
OneTapProps,
GoogleOneTapProps,
 OrganizationListProps,
 OrganizationProfileProps,
 OrganizationSwitcherProps,
Expand DownExpand Up@@ -301,12 +301,12 @@ export const OrganizationList = withClerk(({ clerk, ...props }: WithClerkProp<Or
 );
}, 'OrganizationList');

export const __experimental_GoogleOneTap = withClerk(({ clerk, ...props }: WithClerkProp<OneTapProps>) => {
export const GoogleOneTap = withClerk(({ clerk, ...props }: WithClerkProp<GoogleOneTapProps>) => {
 return (
 <Portal
 open={clerk.__experimental_openGoogleOneTap}
 close={clerk.__experimental_closeGoogleOneTap}
 open={clerk.openGoogleOneTap}
 close={clerk.closeGoogleOneTap}
 props={props}
 />
 );
}, 'OneTap');
}, 'GoogleOneTap');
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
feat(clerk-js,clerk-react,nextjs,types): Drop experimental tag from GoogleOneTap#3392

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

 Merged

panteliselef
merged 4 commits into

from

May 20, 2024
 Merged


feat(clerk-js,clerk-react,nextjs,types): Drop experimental tag from GoogleOneTap
#3392
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
d1fc0b8

feat(clerk-js,clerk-react,nextjs,types): Drop experimental tag from G…


panteliselef May 16, 2024
33449e7

feat(clerk-js,clerk-react,nextjs,types): Add changeset


panteliselef May 16, 2024
1f5b903

test(chrome-extension): Update snapshots


panteliselef May 16, 2024
e97824f

Merge branch 'main' into elef/prepare-one-tap-for-ga


panteliselef May 20, 2024

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


53 changes: 53 additions & 0 deletions
.changeset/shiny-yaks-wave.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
---
'@clerk/clerk-js': minor
'@clerk/nextjs': minor
'@clerk/clerk-react': minor
'@clerk/types': minor
---

Add support for GoogleOneTap. New APIs listed:
### React component
- `<GoogleOneTap/>`

Customize the UX of the prompt

```tsx
<GoogleOneTap
 cancelOnTapOutside={false}
 itpSupport={false}
 fedCmSupport={false}
/>
```

### Use the component from with Vanilla JS
- `Clerk.openGoogleOneTap(props: GoogleOneTapProps)`
- `Clerk.closeGoogleOneTap()`
### Low level APIs for custom flows
- `await Clerk.authenticateWithGoogleOneTap({ token: 'xxxx'})`
- `await Clerk.handleGoogleOneTapCallback()`

We recommend using this two methods together in order and let Clerk to perform the correct redirections.
```tsx
google.accounts.id.initialize({
 callback: async response => {
 const signInOrUp = await Clerk.authenticateWithGoogleOneTap({ token: response.credential})
 await Clerk.handleGoogleOneTapCallback(signInOrUp, {
 signInForceRedirectUrl: window.location.href,
 })
 },
});
```

In case you want to handle the redirection and session management yourself you can do so like this
```tsx
google.accounts.id.initialize({
 callback: async response => {
 const signInOrUp = await Clerk.authenticateWithGoogleOneTap({ token: response.credential})
 if(signInOrUp.status === 'complete') {
 await Clerk.setActive({
 session: signInOrUp.createdSessionId
 })
 }
 },
});
```

2 changes: 1 addition & 1 deletion
packages/chrome-extension/src/__tests__/__snapshots__/exports.test.ts.snap

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,7 @@ exports[`public exports should not include a breaking change 1`] = `
 "ClerkLoading",
 "ClerkProvider",
 "CreateOrganization",
 "GoogleOneTap",
 "OrganizationList",
 "OrganizationProfile",
 "OrganizationSwitcher",
Expand All@@ -26,7 +27,6 @@ exports[`public exports should not include a breaking change 1`] = `
 "SignedOut",
 "UserButton",
 "UserProfile",
 "__experimental_GoogleOneTap",
 "useAuth",
 "useClerk",
 "useEmailLink",
Expand Down

24 changes: 10 additions & 14 deletions
packages/clerk-js/src/core/clerk.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,8 +16,8 @@ import {
} from '@clerk/shared';
import { eventPrebuiltComponentMounted, TelemetryCollector } from '@clerk/shared/telemetry';
import type {
 __experimental_AuthenticateWithGoogleOneTapParams,
 ActiveSessionResource,
 AuthenticateWithGoogleOneTapParams,
 AuthenticateWithMetamaskParams,
 Clerk as ClerkInterface,
 ClerkAPIError,
Expand All@@ -28,12 +28,12 @@ import type {
 DomainOrProxyUrl,
 EnvironmentJSON,
 EnvironmentResource,
 GoogleOneTapProps,
 HandleEmailLinkVerificationParams,
 HandleOAuthCallbackParams,
 InstanceType,
 ListenerCallback,
 NavigateOptions,
 OneTapProps,
 OrganizationListProps,
 OrganizationProfileProps,
 OrganizationResource,
Expand DownExpand Up@@ -330,14 +330,14 @@ export class Clerk implements ClerkInterface {
 }
 };

 public __experimental_openGoogleOneTap = (props?: OneTapProps): void => {
 public openGoogleOneTap = (props?: GoogleOneTapProps): void => {
 this.assertComponentsReady(this.#componentControls);
 void this.#componentControls
 .ensureMounted({ preloadHint: 'OneTap' })
 .ensureMounted({ preloadHint: 'GoogleOneTap' })
 .then(controls => controls.openModal('googleOneTap', props || {}));
 };

 public __experimental_closeGoogleOneTap = (): void => {
 public closeGoogleOneTap = (): void => {
 this.assertComponentsReady(this.#componentControls);
 void this.#componentControls.ensureMounted().then(controls => controls.closeModal('googleOneTap'));
 };
Expand DownExpand Up@@ -1003,7 +1003,7 @@ export class Clerk implements ClerkInterface {
 return null;
 };

 public __experimental_handleGoogleOneTapCallback = async (
 public handleGoogleOneTapCallback = async (
 signInOrUp: SignInResource | SignUpResource,
 params: HandleOAuthCallbackParams,
 customNavigate?: (to: string) => Promise<unknown>,
Expand DownExpand Up@@ -1263,23 +1263,19 @@ export class Clerk implements ClerkInterface {
 return this.setActive({ session: null });
 };

 public __experimental_authenticateWithGoogleOneTap = async (
 params: __experimental_AuthenticateWithGoogleOneTapParams,
 public authenticateWithGoogleOneTap = async (
 params: AuthenticateWithGoogleOneTapParams,
 ): Promise<SignInResource | SignUpResource> => {
 return this.client?.signIn
 .create({
 // TODO-ONETAP: Add new types when feature is ready for public beta
 // @ts-expect-error
 strategy: 'google_one_tap',
googleOneTapToken: params.token,
token: params.token,
 })
 .catch(err => {
 if (isClerkAPIResponseError(err) && err.errors[0].code === 'external_account_not_found') {
 return this.client?.signUp.create({
 // TODO-ONETAP: Add new types when feature is ready for public beta
 // @ts-expect-error
 strategy: 'google_one_tap',
googleOneTapToken: params.token,
token: params.token,
 });
 }
 throw err;
Expand Down

25 changes: 1 addition & 24 deletions
packages/clerk-js/src/core/resources/SignIn.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
import { deepSnakeToCamel, isClerkAPIResponseError, Poller } from '@clerk/shared';
import { deepSnakeToCamel, Poller } from '@clerk/shared';
import type {
 __experimental_AuthenticateWithGoogleOneTapParams,
 AttemptFirstFactorParams,
 AttemptSecondFactorParams,
 AuthenticateWithPasskeyParams,
Expand All@@ -26,7 +25,6 @@ import type {
 SignInSecondFactor,
 SignInStartEmailLinkFlowParams,
 SignInStatus,
 SignUpResource,
 VerificationResource,
 Web3SignatureConfig,
 Web3SignatureFactor,
Expand DownExpand Up@@ -225,27 +223,6 @@ export class SignIn extends BaseResource implements SignInResource {
 }
 };

 public __experimental_authenticateWithGoogleOneTap = async (
 params: __experimental_AuthenticateWithGoogleOneTapParams,
 ): Promise<SignInResource | SignUpResource> => {
 return this.create({
 // TODO-ONETAP: Add new types when feature is ready for public beta
 // @ts-expect-error
 strategy: 'google_one_tap',
 googleOneTapToken: params.token,
 }).catch(err => {
 if (isClerkAPIResponseError(err) && err.errors[0].code === 'external_account_not_found') {
 return SignIn.clerk.client?.signUp.create({
 // TODO-ONETAP: Add new types when feature is ready for public beta
 // @ts-expect-error
 strategy: 'google_one_tap',
 googleOneTapToken: params.token,
 });
 }
 throw err;
 }) as Promise<SignInResource | SignUpResource>;
 };


Comment on lines

-228
 to 
-248

@panteliselefpanteliselefMay 16, 2024

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is moved to Clerk.ts
 public authenticateWithWeb3 = async (params: AuthenticateWithWeb3Params): Promise<SignInResource> => {
 const { identifier, generateSignature } = params || {};
 if (!(typeof generateSignature === 'function')) {
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/Components.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,7 +6,7 @@ import type {
 ClerkOptions,
 CreateOrganizationProps,
 EnvironmentResource,
OneTapProps,
GoogleOneTapProps,
 OrganizationProfileProps,
 SignInProps,
 SignUpProps,
Expand DownExpand Up@@ -84,7 +84,7 @@ interface ComponentsProps {
interface ComponentsState {
 appearance: Appearance | undefined;
 options: ClerkOptions | undefined;
 googleOneTapModal: null | OneTapProps;
 googleOneTapModal: null | GoogleOneTapProps;
 signInModal: null | SignInProps;
 signUpModal: null | SignUpProps;
 userProfileModal: null | UserProfileProps;
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/components/GoogleOneTap/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
import type { OneTapProps } from '@clerk/types';
import type { GoogleOneTapProps } from '@clerk/types';
import React from 'react';

import { withCoreSessionSwitchGuard } from '../../contexts';
Expand All@@ -22,4 +22,4 @@ function OneTapRoutes(): JSX.Element {

OneTapRoutes.displayName = 'OneTap';

export const OneTap: React.ComponentType<OneTapProps> = withCoreSessionSwitchGuard(OneTapRoutes);
export const OneTap: React.ComponentType<GoogleOneTapProps> = withCoreSessionSwitchGuard(OneTapRoutes);

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/components/GoogleOneTap/one-tap-start.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -29,10 +29,10 @@ function _OneTapStart(): JSX.Element | null {
 async function oneTapCallback(response: GISCredentialResponse) {
 isPromptedRef.current = false;
 try {
 const res = await clerk.__experimental_authenticateWithGoogleOneTap({
 const res = await clerk.authenticateWithGoogleOneTap({
 token: response.credential,
 });
 await clerk.__experimental_handleGoogleOneTapCallback(
 await clerk.handleGoogleOneTapCallback(
 res,
 {
 signInUrl,
Expand DownExpand Up@@ -80,7 +80,7 @@ function _OneTapStart(): JSX.Element | null {
 // Close the modal, when the user clicks outside the prompt or cancels
 if (notification.getMomentType() === 'skipped') {
 // Unmounts the component will cause the useEffect cleanup function from below to be called
 clerk.__experimental_closeGoogleOneTap();
 clerk.closeGoogleOneTap();
 }
 });
 isPromptedRef.current = true;
Expand Down

6 changes: 3 additions & 3 deletions
packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -14,7 +14,7 @@ import { useRouter } from '../router';
import type {
 AvailableComponentCtx,
 CreateOrganizationCtx,
OneTapCtx,
GoogleOneTapCtx,
 OrganizationListCtx,
 OrganizationProfileCtx,
 OrganizationSwitcherCtx,
Expand DownExpand Up@@ -497,12 +497,12 @@ export const useCreateOrganizationContext = () => {
};

export const useGoogleOneTapContext = () => {
 const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as OneTapCtx;
 const { componentName, ...ctx } = (React.useContext(ComponentContext) || {}) as GoogleOneTapCtx;
 const options = useOptions();
 const { displayConfig } = useEnvironment();
 const { queryParams } = useRouter();

 if (componentName !== 'OneTap') {
 if (componentName !== 'GoogleOneTap') {
 throw new Error('Clerk: useGoogleOneTapContext called outside GoogleOneTap.');
 }

Expand Down

8 changes: 5 additions & 3 deletions
packages/clerk-js/src/ui/lazyModules/components.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -12,13 +12,15 @@ const componentImportPaths = {
 import(/* webpackChunkName: "organizationswitcher" */ './../components/OrganizationSwitcher'),
 OrganizationList: () => import(/* webpackChunkName: "organizationlist" */ './../components/OrganizationList'),
 ImpersonationFab: () => import(/* webpackChunkName: "impersonationfab" */ './../components/ImpersonationFab'),
OneTap: () => import(/* webpackChunkName: "oneTap" */ './../components/GoogleOneTap'),
GoogleOneTap: () => import(/* webpackChunkName: "oneTap" */ './../components/GoogleOneTap'),
} as const;

export const SignIn = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignIn })));

export const SignInModal = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignInModal })));
export const OneTap = lazy(() => componentImportPaths.OneTap().then(module => ({ default: module.OneTap })));
export const GoogleOneTap = lazy(() =>
 componentImportPaths.GoogleOneTap().then(module => ({ default: module.OneTap })),
);

export const SignUp = lazy(() => componentImportPaths.SignUp().then(module => ({ default: module.SignUp })));

Expand DownExpand Up@@ -79,7 +81,7 @@ export const ClerkComponents = {
 UserProfileModal,
 OrganizationProfileModal,
 CreateOrganizationModal,
OneTap,
GoogleOneTap,
};

export type ClerkComponentName = keyof typeof ClerkComponents;

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/lazyModules/providers.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -146,9 +146,9 @@ export const LazyOneTapRenderer = (props: LazyOneTapRendererProps) => {
 >
 <VirtualBodyRootPortal
 startPath={props.startPath}
 component={ClerkComponents['OneTap']}
 component={ClerkComponents['GoogleOneTap']}
 props={props.componentProps}
 componentName={'OneTap'}
 componentName={'GoogleOneTap'}
 />
 </AppearanceProvider>
 );
Expand Down

10 changes: 5 additions & 5 deletions
packages/clerk-js/src/ui/types.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
import type {
 CreateOrganizationProps,
OneTapProps,
GoogleOneTapProps,
 OrganizationListProps,
 OrganizationProfileProps,
 OrganizationSwitcherProps,
Expand All@@ -11,7 +11,7 @@ import type {
} from '@clerk/types';

export type {
OneTapProps,
GoogleOneTapProps,
 SignInProps,
 SignUpProps,
 UserButtonProps,
Expand DownExpand Up@@ -74,8 +74,8 @@ export type OrganizationListCtx = OrganizationListProps & {
 mode?: ComponentMode;
};

export type OneTapCtx = OneTapProps & {
 componentName: 'OneTap';
export type GoogleOneTapCtx = GoogleOneTapProps & {
 componentName: 'GoogleOneTap';
};

export type AvailableComponentCtx =
Expand All@@ -87,4 +87,4 @@ export type AvailableComponentCtx =
 | CreateOrganizationCtx
 | OrganizationSwitcherCtx
 | OrganizationListCtx
 | OneTapCtx;
 | GoogleOneTapCtx;

2 changes: 1 addition & 1 deletion
packages/nextjs/src/client-boundary/uiComponents.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -26,7 +26,7 @@ export {
 SignOutButton,
 SignUpButton,
 UserButton,
__experimental_GoogleOneTap,
GoogleOneTap,
} from '@clerk/clerk-react';

// The assignment of UserProfile with BaseUserProfile props is used
Expand Down

2 changes: 1 addition & 1 deletion
packages/nextjs/src/index.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,7 +30,7 @@ export {
 SignUpButton,
 UserButton,
 UserProfile,
__experimental_GoogleOneTap,
GoogleOneTap,
} from './client-boundary/uiComponents';

/**
Expand Down

2 changes: 1 addition & 1 deletion
packages/react/src/components/index.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,7 @@ export {
 OrganizationProfile,
 CreateOrganization,
 OrganizationList,
__experimental_GoogleOneTap,
GoogleOneTap,
} from './uiComponents';

export {
Expand Down

10 changes: 5 additions & 5 deletions
packages/react/src/components/uiComponents.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,7 +2,7 @@ import { logErrorInDevMode, without } from '@clerk/shared';
import { isDeeplyEqual } from '@clerk/shared/react';
import type {
 CreateOrganizationProps,
OneTapProps,
GoogleOneTapProps,
 OrganizationListProps,
 OrganizationProfileProps,
 OrganizationSwitcherProps,
Expand DownExpand Up@@ -301,12 +301,12 @@ export const OrganizationList = withClerk(({ clerk, ...props }: WithClerkProp<Or
 );
}, 'OrganizationList');

export const __experimental_GoogleOneTap = withClerk(({ clerk, ...props }: WithClerkProp<OneTapProps>) => {
export const GoogleOneTap = withClerk(({ clerk, ...props }: WithClerkProp<GoogleOneTapProps>) => {
 return (
 <Portal
 open={clerk.__experimental_openGoogleOneTap}
 close={clerk.__experimental_closeGoogleOneTap}
 open={clerk.openGoogleOneTap}
 close={clerk.closeGoogleOneTap}
 props={props}
 />
 );
}, 'OneTap');
}, 'GoogleOneTap');
Loading