Clerk dev failing for latest devices when using device emulation

theonlyway commented 9 months ago

Preliminary Checks

[X] I have reviewed the documentation: https://clerk.com/docs
[X] I have searched for existing issues: https://github.com/clerk/javascript/issues
[X] I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)
[X] This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Reproduction / Replay Link

n/a

Publishable key

pk_test_a2V5LXNrdW5rLTAuY2xlcmsuYWNjb3VudHMuZGV2JA

Description

The clerk development endpoint is failing to allow you to login to Google via oauth if you use the latest device emulation option provided with the latest version of Edge (And probably Chrome)

Steps to reproduce:

Open DevTools in Edge (Version 119.0.2151.93 (Official build) (64-bit))
Toggle device emulation
Switch device to iPhone 14 Pro max

Expected behavior:

You should be able to login to the clerk dev endpoint via Google oauth

Actual behavior: You cannot login to Google oauth

Access blocked: Clerk’s request does not comply with Google’s policies
Clerk’s request does not comply with Google’s ‘Use secure browsers’ policy. If this app has a website, you can open a web browser and try signing in from there. If you are attempting to access a wireless network, please follow [these instructions](https://support.google.com/accounts/answer/9690282).
You can also contact the [developer](https://accounts.google.com/) to let them know that their app must comply with Google’s ‘Use secure browsers’ policy.
[Learn more about this error](https://support.google.com/accounts/answer/7675428)
If you are a developer of Clerk, see [error details](https://accounts.google.com/).
Error 403: disallowed_useragent

Output of the error details button

Error 403: disallowed_useragent
Request details: access_type=offline response_type=code redirect_uri=https://clerk.shared.lcl.dev/v1/oauth_callback state=5vg7wt2nk3luwlqealdehkog5l06imhbz3wou6ys client_id=787459168867-0v2orf3qo56uocsi84iroseoahhuovdm.apps.googleusercontent.com scope=openid https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile

The user agent being passed with this device is Mozilla/5.0 (iPhone; CPU iPhone OS 16_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Mobile/15E148 Safari/604.1 Edg/119.0.0.0

Environment

System:
    OS: Windows 10 10.0.19045
    CPU: (32) x64 13th Gen Intel(R) Core(TM) i9-13900K       
    Memory: 41.87 GB / 63.71 GB
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.3636.0), Chromium (119.0.2151.93)
    Internet Explorer: 11.0.19041.3636
  npmPackages:
    @clerk/nextjs: ^4.27.1 => 4.27.2
    @clerk/types: ^3.57.0 => 3.58.0
    @hookform/devtools: ^4.3.1 => 4.3.1
    @hookform/resolvers: ^3.3.2 => 3.3.2
    @next/bundle-analyzer: ^14.0.2 => 14.0.3
    @planetscale/database: ^1.11.0 => 1.11.0
    @radix-ui/react-accordion: ^1.1.2 => 1.1.2
    @radix-ui/react-alert-dialog: ^1.0.5 => 1.0.5
    @radix-ui/react-aspect-ratio: ^1.0.3 => 1.0.3
    @radix-ui/react-avatar: ^1.0.4 => 1.0.4
    @radix-ui/react-checkbox: ^1.0.4 => 1.0.4
    @radix-ui/react-collapsible: ^1.0.3 => 1.0.3
    @radix-ui/react-context-menu: ^2.1.5 => 2.1.5
    @radix-ui/react-dialog: ^1.0.5 => 1.0.5
    @radix-ui/react-dropdown-menu: ^2.0.6 => 2.0.6
    @radix-ui/react-hover-card: ^1.0.7 => 1.0.7
    @radix-ui/react-label: ^2.0.2 => 2.0.2
    @radix-ui/react-navigation-menu: ^1.1.4 => 1.1.4
    @radix-ui/react-popover: ^1.0.7 => 1.0.7
    @radix-ui/react-progress: ^1.0.3 => 1.0.3
    @radix-ui/react-radio-group: ^1.1.3 => 1.1.3
    @radix-ui/react-scroll-area: ^1.0.5 => 1.0.5
    @radix-ui/react-select: ^2.0.0 => 2.0.0
    @radix-ui/react-separator: ^1.0.3 => 1.0.3
    @radix-ui/react-slider: ^1.1.2 => 1.1.2
    @radix-ui/react-slot: ^1.0.2 => 1.0.2
    @radix-ui/react-switch: ^1.0.3 => 1.0.3
    @radix-ui/react-tabs: ^1.0.4 => 1.0.4
    @radix-ui/react-toast: ^1.1.5 => 1.1.5
    @radix-ui/react-toggle: ^1.0.3 => 1.0.3
    @tanstack/react-query: ^5.0.5 => 5.8.7
    @tanstack/react-query-devtools: ^5.1.0 => 5.8.7
    @tanstack/react-table: ^8.10.7 => 8.10.7
    @types/node: ^20.8.8 => 20.10.0
    @types/react: ^18.2.31 => 18.2.38
    @types/react-dom: ^18.2.14 => 18.2.17
    @typescript-eslint/eslint-plugin: ^6.9.0 => 6.12.0
    @typescript-eslint/parser: ^6.9.0 => 6.12.0
    autoprefixer: ^10.4.16 => 10.4.16
    class-variance-authority: ^0.7.0 => 0.7.0
    clsx: ^2.0.0 => 2.0.0
    cmdk: ^0.2.0 => 0.2.0
    cssnano: ^6.0.1 => 6.0.1
    date-fns: ^2.30.0 => 2.30.0
    drizzle-kit: ^0.19.13 => 0.19.13
    drizzle-orm: ^0.28.6 => 0.28.6
    drizzle-zod: ^0.5.1 => 0.5.1
    eslint: ^8.52.0 => 8.54.0
    eslint-config-next: ^14.0.0 => 14.0.3
    eslint-config-prettier: ^9.0.0 => 9.0.0
    eslint-plugin-drizzle: ^0.2.2 => 0.2.2
    eslint-plugin-react: ^7.33.2 => 7.33.2
    framer-motion: ^10.16.4 => 10.16.5
    geist: ^1.1.0 => 1.1.0
    immer: ^10.0.3 => 10.0.3
    knip: ^3.4.0 => 3.4.0
    lodash: ^4.17.21 => 4.17.21
    lucide-react: ^0.293.0 => 0.293.0
    mysql2: ^3.6.3 => 3.6.5
    nanoid: ^5.0.2 => 5.0.3
    next: ^14.0.2 => 14.0.3
    next-axiom: ^1.1.1 => 1.1.1
    next-themes: ^0.2.1 => 0.2.1
    postcss: ^8.4.31 => 8.4.31
    prettier: ^3.0.3 => 3.1.0
    prettier-plugin-tailwindcss: ^0.5.6 => 0.5.7
    react: ^18.2.0 => 18.2.0
    react-day-picker: ^8.9.1 => 8.9.1
    react-dom: ^18.2.0 => 18.2.0
    react-hook-form: ^7.48.2 => 7.48.2
    react-remove-scroll: ^2.5.7 => 2.5.7
    react-type-animation: ^3.2.0 => 3.2.0
    recharts: ^2.9.0 => 2.10.1
    server-only: ^0.0.1 => 0.0.1
    sharp: ^0.33.0 => 0.33.0
    tailwind-merge: ^2.0.0 => 2.0.0
    tailwindcss: ^3.3.4 => 3.3.5
    tailwindcss-animate: ^1.0.7 => 1.0.7
    typescript: ^5.3.2 => 5.3.2
    zod: ^3.22.4 => 3.22.4
    zustand: ^4.4.6 => 4.4.6

jescalan commented 9 months ago

We think that this is likely an issue with google, in that they do not yet trust the latest device emulation's fingerprint - if this is the case, we're not able to resolve this one and it would have to be a fix coming from google.

It is possible however that the issue happens because it's using our default shared OAuth credentials for dev instances. It's a bit of a long shot, but it may resolve the issue if you go into your clerk dashboard for the app you're using, navigate to "User & Authentication" > "Social Connections", and clicking the settings cog for the google OAuth connection, and check the "use custom credentials" box and fill them out with your own google app's credentials. Let us know if this does the trick!

theonlyway commented 9 months ago

Yeah I tried switching to my own oauth provider still no go. Doesn't look like there is any config options on the provider to set allowed user agents so I guess we can't really do anything until Google does something.

clerk / javascript