fix(clerk-js): Fix FAPI initiated redirect flow for OAuth2 IDP flow with email_link verification - #2677

Merged
mzhong9723 merged 1 commit into
mainfrom
mz/core-1567-oauth-provider-email-link-verification
Jan 31, 2024
Merged

fix(clerk-js): Fix FAPI initiated redirect flow for OAuth2 IDP flow with email_link verification#2677
mzhong9723 merged 1 commit into
mainfrom
mz/core-1567-oauth-provider-email-link-verification

Conversation

@mzhong9723

@mzhong9723mzhong9723 commented Jan 29, 2024

Copy link
Copy Markdown
Member

Description

For the OAuth2 IDP flow, we should not redirect when the referrer is the sign up url. This way, a second factor can be completed after a first factor like email verification link. Previously, users were being redirected back to FAPI /oauth/authorize prematurely. This change ensures that users will not be redirected as such and have the chance to complete their second factor verification, like phone code.

Fixes CORE-1567

Video of fix below (there's a jump in the middle because I cut out retrieving the email link from my inbox):
https://github.com/clerk/javascript/assets/27433835/63e4ec43-1107-4c90-8ee5-f9196be7210c

Previously, the user would be redirected back to the sign in page without being able to complete sign up.

Checklist

  • npm test runs as expected.
  • npm run build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Packages affected

  • @clerk/backend
  • @clerk/chrome-extension
  • @clerk/clerk-js
  • @clerk/clerk-expo
  • @clerk/fastify
  • gatsby-plugin-clerk
  • @clerk/localizations
  • @clerk/nextjs
  • @clerk/clerk-react
  • @clerk/remix
  • @clerk/clerk-sdk-node
  • @clerk/shared
  • @clerk/themes
  • @clerk/types
  • build/tooling/chore

@changeset-bot

changeset-botBot commented Jan 29, 2024

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 575478b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@mzhong9723
mzhong9723 requested review from a team and octoper and removed request for a team and octoperJanuary 29, 2024 21:26

@panteliselefpanteliselef left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@mzhong9723 Seems like this was reported for v4 components and we should probably need to backport this PR to v4.

I will help with that once the PR is merged to main. Could we just add a description in the changeset ?

Comment on lines +1 to +3
---
---

@panteliselefpanteliselefJan 30, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Maybe something like this ?

Suggested change
---
---
---
'@clerk/clerk-js': patch
---
Fix redirect flow for OAuth2 IDP flow with email_link verification.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

Thanks @panteliselef, updated the changeset!

Comment threadpackages/clerk-js/src/core/clerk.ts Outdated
@@ -1615,9 +1615,11 @@ export class Clerk implements ClerkInterface {
const userSignedIn = this.session;
const signInUrl = this.#environment?.displayConfig.signInUrl;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

In ClerkJS both signInUrl and signUpUrl can be injected via ClerkOptions. These ClerkOptions come from CLERK_SIGN_IN_URL in frameworks such as Next.js. The display config settings are left as a fallback and are downplayed in v5.

So for this method, we should pick signInUrl and signUpUrl from ClerkOptions first.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

@SokratisVidros updated both sign in and sign up urls to use ClerkOptions first and display config urls as a second fallback option

@mzhong9723
mzhong9723force-pushed the mz/core-1567-oauth-provider-email-link-verification branch from 37851d3 to 6574d50CompareJanuary 30, 2024 15:37
@mzhong9723
mzhong9723force-pushed the mz/core-1567-oauth-provider-email-link-verification branch from 6574d50 to f5e6a4fCompareJanuary 30, 2024 15:41
Comment threadpackages/clerk-js/src/core/clerk.ts Outdated

const userSignedIn = this.session;
const signInUrl = this.#environment?.displayConfig.signInUrl;
const signInUrl = this.#options.signInUrl ? this.#options.signInUrl : this.#environment?.displayConfig.signInUrl;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Suggested change
constsignInUrl=this.#options.signInUrl? this.#options.signInUrl :this.#environment?.displayConfig.signInUrl;
constsignInUrl=this.#options.signInUrl||this.#environment?.displayConfig.signInUrl;

…ith email_link verification
For the OAuth2 IDP flow, we should not redirect when the referrer is
the sign up url. This way, the second factor can be completed
after a first factor like email verification link. Previously,
users were being redirected back to FAPI /oauth/authorize
prematurely. This change ensures that users will not be
redirected as such and have the chance to complete their second
factor verification, like phone code.
@mzhong9723
mzhong9723force-pushed the mz/core-1567-oauth-provider-email-link-verification branch from f5e6a4f to 575478bCompareJanuary 31, 2024 14:28
@mzhong9723
mzhong9723 added this pull request to the merge queue Jan 31, 2024
Merged via the queue into main with commit 7503376Jan 31, 2024
@mzhong9723
mzhong9723 deleted the mz/core-1567-oauth-provider-email-link-verification branch January 31, 2024 15:02
panteliselef pushed a commit that referenced this pull request Feb 1, 2024
…ith email_link verification (#2677)
For the OAuth2 IDP flow, we should not redirect when the referrer is
the sign up url. This way, the second factor can be completed
after a first factor like email verification link. Previously,
users were being redirected back to FAPI /oauth/authorize
prematurely. This change ensures that users will not be
redirected as such and have the chance to complete their second
factor verification, like phone code.
(cherry picked from commit 7503376)
github-merge-queueBot pushed a commit that referenced this pull request Feb 1, 2024
…ith email_link verification (#2677) (#2702)
For the OAuth2 IDP flow, we should not redirect when the referrer is
the sign up url. This way, the second factor can be completed
after a first factor like email verification link. Previously,
users were being redirected back to FAPI /oauth/authorize
prematurely. This change ensures that users will not be
redirected as such and have the chance to complete their second
factor verification, like phone code.
(cherry picked from commit 7503376)
Co-authored-by: Mary Zhong <mary@clerk.dev>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@mzhong9723@SokratisVidros@panteliselef@clerk-cookie
, '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

fix(clerk-js): Fix FAPI initiated redirect flow for OAuth2 IDP flow with email_link verification - #2677

Merged
mzhong9723 merged 1 commit into
mainfrom
mz/core-1567-oauth-provider-email-link-verification
Jan 31, 2024
Merged

fix(clerk-js): Fix FAPI initiated redirect flow for OAuth2 IDP flow with email_link verification#2677
mzhong9723 merged 1 commit into
mainfrom
mz/core-1567-oauth-provider-email-link-verification

Conversation

@mzhong9723

@mzhong9723mzhong9723 commented Jan 29, 2024

Copy link
Copy Markdown
Member

Description

For the OAuth2 IDP flow, we should not redirect when the referrer is the sign up url. This way, a second factor can be completed after a first factor like email verification link. Previously, users were being redirected back to FAPI /oauth/authorize prematurely. This change ensures that users will not be redirected as such and have the chance to complete their second factor verification, like phone code.

Fixes CORE-1567

Video of fix below (there's a jump in the middle because I cut out retrieving the email link from my inbox):
https://github.com/clerk/javascript/assets/27433835/63e4ec43-1107-4c90-8ee5-f9196be7210c

Previously, the user would be redirected back to the sign in page without being able to complete sign up.

Checklist

  • npm test runs as expected.
  • npm run build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Packages affected

  • @clerk/backend
  • @clerk/chrome-extension
  • @clerk/clerk-js
  • @clerk/clerk-expo
  • @clerk/fastify
  • gatsby-plugin-clerk
  • @clerk/localizations
  • @clerk/nextjs
  • @clerk/clerk-react
  • @clerk/remix
  • @clerk/clerk-sdk-node
  • @clerk/shared
  • @clerk/themes
  • @clerk/types
  • build/tooling/chore

@changeset-bot

changeset-botBot commented Jan 29, 2024

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 575478b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@mzhong9723
mzhong9723 requested review from a team and octoper and removed request for a team and octoperJanuary 29, 2024 21:26

@panteliselefpanteliselef left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@mzhong9723 Seems like this was reported for v4 components and we should probably need to backport this PR to v4.

I will help with that once the PR is merged to main. Could we just add a description in the changeset ?

Comment on lines +1 to +3
---
---

@panteliselefpanteliselefJan 30, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Maybe something like this ?

Suggested change
---
---
---
'@clerk/clerk-js': patch
---
Fix redirect flow for OAuth2 IDP flow with email_link verification.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

Thanks @panteliselef, updated the changeset!

Comment threadpackages/clerk-js/src/core/clerk.ts Outdated
@@ -1615,9 +1615,11 @@ export class Clerk implements ClerkInterface {
const userSignedIn = this.session;
const signInUrl = this.#environment?.displayConfig.signInUrl;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

In ClerkJS both signInUrl and signUpUrl can be injected via ClerkOptions. These ClerkOptions come from CLERK_SIGN_IN_URL in frameworks such as Next.js. The display config settings are left as a fallback and are downplayed in v5.

So for this method, we should pick signInUrl and signUpUrl from ClerkOptions first.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

@SokratisVidros updated both sign in and sign up urls to use ClerkOptions first and display config urls as a second fallback option

@mzhong9723
mzhong9723force-pushed the mz/core-1567-oauth-provider-email-link-verification branch from 37851d3 to 6574d50CompareJanuary 30, 2024 15:37
@mzhong9723
mzhong9723force-pushed the mz/core-1567-oauth-provider-email-link-verification branch from 6574d50 to f5e6a4fCompareJanuary 30, 2024 15:41
Comment threadpackages/clerk-js/src/core/clerk.ts Outdated

const userSignedIn = this.session;
const signInUrl = this.#environment?.displayConfig.signInUrl;
const signInUrl = this.#options.signInUrl ? this.#options.signInUrl : this.#environment?.displayConfig.signInUrl;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Suggested change
constsignInUrl=this.#options.signInUrl? this.#options.signInUrl :this.#environment?.displayConfig.signInUrl;
constsignInUrl=this.#options.signInUrl||this.#environment?.displayConfig.signInUrl;

…ith email_link verification
For the OAuth2 IDP flow, we should not redirect when the referrer is
the sign up url. This way, the second factor can be completed
after a first factor like email verification link. Previously,
users were being redirected back to FAPI /oauth/authorize
prematurely. This change ensures that users will not be
redirected as such and have the chance to complete their second
factor verification, like phone code.
@mzhong9723
mzhong9723force-pushed the mz/core-1567-oauth-provider-email-link-verification branch from f5e6a4f to 575478bCompareJanuary 31, 2024 14:28
@mzhong9723
mzhong9723 added this pull request to the merge queue Jan 31, 2024
Merged via the queue into main with commit 7503376Jan 31, 2024
@mzhong9723
mzhong9723 deleted the mz/core-1567-oauth-provider-email-link-verification branch January 31, 2024 15:02
panteliselef pushed a commit that referenced this pull request Feb 1, 2024
…ith email_link verification (#2677)
For the OAuth2 IDP flow, we should not redirect when the referrer is
the sign up url. This way, the second factor can be completed
after a first factor like email verification link. Previously,
users were being redirected back to FAPI /oauth/authorize
prematurely. This change ensures that users will not be
redirected as such and have the chance to complete their second
factor verification, like phone code.
(cherry picked from commit 7503376)
github-merge-queueBot pushed a commit that referenced this pull request Feb 1, 2024
…ith email_link verification (#2677) (#2702)
For the OAuth2 IDP flow, we should not redirect when the referrer is
the sign up url. This way, the second factor can be completed
after a first factor like email verification link. Previously,
users were being redirected back to FAPI /oauth/authorize
prematurely. This change ensures that users will not be
redirected as such and have the chance to complete their second
factor verification, like phone code.
(cherry picked from commit 7503376)
Co-authored-by: Mary Zhong <mary@clerk.dev>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@mzhong9723@SokratisVidros@panteliselef@clerk-cookie
, '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

fix(clerk-js): Fix FAPI initiated redirect flow for OAuth2 IDP flow with email_link verification - #2677

Merged
mzhong9723 merged 1 commit into
mainfrom
mz/core-1567-oauth-provider-email-link-verification
Jan 31, 2024
Merged

fix(clerk-js): Fix FAPI initiated redirect flow for OAuth2 IDP flow with email_link verification#2677
mzhong9723 merged 1 commit into
mainfrom
mz/core-1567-oauth-provider-email-link-verification

Conversation

@mzhong9723

@mzhong9723mzhong9723 commented Jan 29, 2024

Copy link
Copy Markdown
Member

Description

For the OAuth2 IDP flow, we should not redirect when the referrer is the sign up url. This way, a second factor can be completed after a first factor like email verification link. Previously, users were being redirected back to FAPI /oauth/authorize prematurely. This change ensures that users will not be redirected as such and have the chance to complete their second factor verification, like phone code.

Fixes CORE-1567

Video of fix below (there's a jump in the middle because I cut out retrieving the email link from my inbox):
https://github.com/clerk/javascript/assets/27433835/63e4ec43-1107-4c90-8ee5-f9196be7210c

Previously, the user would be redirected back to the sign in page without being able to complete sign up.

Checklist

  • npm test runs as expected.
  • npm run build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Packages affected

  • @clerk/backend
  • @clerk/chrome-extension
  • @clerk/clerk-js
  • @clerk/clerk-expo
  • @clerk/fastify
  • gatsby-plugin-clerk
  • @clerk/localizations
  • @clerk/nextjs
  • @clerk/clerk-react
  • @clerk/remix
  • @clerk/clerk-sdk-node
  • @clerk/shared
  • @clerk/themes
  • @clerk/types
  • build/tooling/chore

@changeset-bot

changeset-botBot commented Jan 29, 2024

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 575478b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@mzhong9723
mzhong9723 requested review from a team and octoper and removed request for a team and octoperJanuary 29, 2024 21:26

@panteliselefpanteliselef left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@mzhong9723 Seems like this was reported for v4 components and we should probably need to backport this PR to v4.

I will help with that once the PR is merged to main. Could we just add a description in the changeset ?

Comment on lines +1 to +3
---
---

@panteliselefpanteliselefJan 30, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Maybe something like this ?

Suggested change
---
---
---
'@clerk/clerk-js': patch
---
Fix redirect flow for OAuth2 IDP flow with email_link verification.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

Thanks @panteliselef, updated the changeset!

Comment threadpackages/clerk-js/src/core/clerk.ts Outdated
@@ -1615,9 +1615,11 @@ export class Clerk implements ClerkInterface {
const userSignedIn = this.session;
const signInUrl = this.#environment?.displayConfig.signInUrl;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

In ClerkJS both signInUrl and signUpUrl can be injected via ClerkOptions. These ClerkOptions come from CLERK_SIGN_IN_URL in frameworks such as Next.js. The display config settings are left as a fallback and are downplayed in v5.

So for this method, we should pick signInUrl and signUpUrl from ClerkOptions first.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

@SokratisVidros updated both sign in and sign up urls to use ClerkOptions first and display config urls as a second fallback option

@mzhong9723
mzhong9723force-pushed the mz/core-1567-oauth-provider-email-link-verification branch from 37851d3 to 6574d50CompareJanuary 30, 2024 15:37
@mzhong9723
mzhong9723force-pushed the mz/core-1567-oauth-provider-email-link-verification branch from 6574d50 to f5e6a4fCompareJanuary 30, 2024 15:41
Comment threadpackages/clerk-js/src/core/clerk.ts Outdated

const userSignedIn = this.session;
const signInUrl = this.#environment?.displayConfig.signInUrl;
const signInUrl = this.#options.signInUrl ? this.#options.signInUrl : this.#environment?.displayConfig.signInUrl;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Suggested change
constsignInUrl=this.#options.signInUrl? this.#options.signInUrl :this.#environment?.displayConfig.signInUrl;
constsignInUrl=this.#options.signInUrl||this.#environment?.displayConfig.signInUrl;

…ith email_link verification
For the OAuth2 IDP flow, we should not redirect when the referrer is
the sign up url. This way, the second factor can be completed
after a first factor like email verification link. Previously,
users were being redirected back to FAPI /oauth/authorize
prematurely. This change ensures that users will not be
redirected as such and have the chance to complete their second
factor verification, like phone code.
@mzhong9723
mzhong9723force-pushed the mz/core-1567-oauth-provider-email-link-verification branch from f5e6a4f to 575478bCompareJanuary 31, 2024 14:28
@mzhong9723
mzhong9723 added this pull request to the merge queue Jan 31, 2024
Merged via the queue into main with commit 7503376Jan 31, 2024
@mzhong9723
mzhong9723 deleted the mz/core-1567-oauth-provider-email-link-verification branch January 31, 2024 15:02
panteliselef pushed a commit that referenced this pull request Feb 1, 2024
…ith email_link verification (#2677)
For the OAuth2 IDP flow, we should not redirect when the referrer is
the sign up url. This way, the second factor can be completed
after a first factor like email verification link. Previously,
users were being redirected back to FAPI /oauth/authorize
prematurely. This change ensures that users will not be
redirected as such and have the chance to complete their second
factor verification, like phone code.
(cherry picked from commit 7503376)
github-merge-queueBot pushed a commit that referenced this pull request Feb 1, 2024
…ith email_link verification (#2677) (#2702)
For the OAuth2 IDP flow, we should not redirect when the referrer is
the sign up url. This way, the second factor can be completed
after a first factor like email verification link. Previously,
users were being redirected back to FAPI /oauth/authorize
prematurely. This change ensures that users will not be
redirected as such and have the chance to complete their second
factor verification, like phone code.
(cherry picked from commit 7503376)
Co-authored-by: Mary Zhong <mary@clerk.dev>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@mzhong9723@SokratisVidros@panteliselef@clerk-cookie
, '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

fix(clerk-js): Fix FAPI initiated redirect flow for OAuth2 IDP flow with email_link verification - #2677

Merged
mzhong9723 merged 1 commit into
mainfrom
mz/core-1567-oauth-provider-email-link-verification
Jan 31, 2024
Merged

fix(clerk-js): Fix FAPI initiated redirect flow for OAuth2 IDP flow with email_link verification#2677
mzhong9723 merged 1 commit into
mainfrom
mz/core-1567-oauth-provider-email-link-verification

Conversation

@mzhong9723

@mzhong9723mzhong9723 commented Jan 29, 2024

Copy link
Copy Markdown
Member

Description

For the OAuth2 IDP flow, we should not redirect when the referrer is the sign up url. This way, a second factor can be completed after a first factor like email verification link. Previously, users were being redirected back to FAPI /oauth/authorize prematurely. This change ensures that users will not be redirected as such and have the chance to complete their second factor verification, like phone code.

Fixes CORE-1567

Video of fix below (there's a jump in the middle because I cut out retrieving the email link from my inbox):
https://github.com/clerk/javascript/assets/27433835/63e4ec43-1107-4c90-8ee5-f9196be7210c

Previously, the user would be redirected back to the sign in page without being able to complete sign up.

Checklist

  • npm test runs as expected.
  • npm run build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Packages affected

  • @clerk/backend
  • @clerk/chrome-extension
  • @clerk/clerk-js
  • @clerk/clerk-expo
  • @clerk/fastify
  • gatsby-plugin-clerk
  • @clerk/localizations
  • @clerk/nextjs
  • @clerk/clerk-react
  • @clerk/remix
  • @clerk/clerk-sdk-node
  • @clerk/shared
  • @clerk/themes
  • @clerk/types
  • build/tooling/chore

@changeset-bot

changeset-botBot commented Jan 29, 2024

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 575478b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@mzhong9723
mzhong9723 requested review from a team and octoper and removed request for a team and octoperJanuary 29, 2024 21:26

@panteliselefpanteliselef left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@mzhong9723 Seems like this was reported for v4 components and we should probably need to backport this PR to v4.

I will help with that once the PR is merged to main. Could we just add a description in the changeset ?

Comment on lines +1 to +3
---
---

@panteliselefpanteliselefJan 30, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Maybe something like this ?

Suggested change
---
---
---
'@clerk/clerk-js': patch
---
Fix redirect flow for OAuth2 IDP flow with email_link verification.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

Thanks @panteliselef, updated the changeset!

Comment threadpackages/clerk-js/src/core/clerk.ts Outdated
@@ -1615,9 +1615,11 @@ export class Clerk implements ClerkInterface {
const userSignedIn = this.session;
const signInUrl = this.#environment?.displayConfig.signInUrl;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

In ClerkJS both signInUrl and signUpUrl can be injected via ClerkOptions. These ClerkOptions come from CLERK_SIGN_IN_URL in frameworks such as Next.js. The display config settings are left as a fallback and are downplayed in v5.

So for this method, we should pick signInUrl and signUpUrl from ClerkOptions first.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

@SokratisVidros updated both sign in and sign up urls to use ClerkOptions first and display config urls as a second fallback option

@mzhong9723
mzhong9723force-pushed the mz/core-1567-oauth-provider-email-link-verification branch from 37851d3 to 6574d50CompareJanuary 30, 2024 15:37
@mzhong9723
mzhong9723force-pushed the mz/core-1567-oauth-provider-email-link-verification branch from 6574d50 to f5e6a4fCompareJanuary 30, 2024 15:41
Comment threadpackages/clerk-js/src/core/clerk.ts Outdated

const userSignedIn = this.session;
const signInUrl = this.#environment?.displayConfig.signInUrl;
const signInUrl = this.#options.signInUrl ? this.#options.signInUrl : this.#environment?.displayConfig.signInUrl;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Suggested change
constsignInUrl=this.#options.signInUrl? this.#options.signInUrl :this.#environment?.displayConfig.signInUrl;
constsignInUrl=this.#options.signInUrl||this.#environment?.displayConfig.signInUrl;

…ith email_link verification
For the OAuth2 IDP flow, we should not redirect when the referrer is
the sign up url. This way, the second factor can be completed
after a first factor like email verification link. Previously,
users were being redirected back to FAPI /oauth/authorize
prematurely. This change ensures that users will not be
redirected as such and have the chance to complete their second
factor verification, like phone code.
@mzhong9723
mzhong9723force-pushed the mz/core-1567-oauth-provider-email-link-verification branch from f5e6a4f to 575478bCompareJanuary 31, 2024 14:28
@mzhong9723
mzhong9723 added this pull request to the merge queue Jan 31, 2024
Merged via the queue into main with commit 7503376Jan 31, 2024
@mzhong9723
mzhong9723 deleted the mz/core-1567-oauth-provider-email-link-verification branch January 31, 2024 15:02
panteliselef pushed a commit that referenced this pull request Feb 1, 2024
…ith email_link verification (#2677)
For the OAuth2 IDP flow, we should not redirect when the referrer is
the sign up url. This way, the second factor can be completed
after a first factor like email verification link. Previously,
users were being redirected back to FAPI /oauth/authorize
prematurely. This change ensures that users will not be
redirected as such and have the chance to complete their second
factor verification, like phone code.
(cherry picked from commit 7503376)
github-merge-queueBot pushed a commit that referenced this pull request Feb 1, 2024
…ith email_link verification (#2677) (#2702)
For the OAuth2 IDP flow, we should not redirect when the referrer is
the sign up url. This way, the second factor can be completed
after a first factor like email verification link. Previously,
users were being redirected back to FAPI /oauth/authorize
prematurely. This change ensures that users will not be
redirected as such and have the chance to complete their second
factor verification, like phone code.
(cherry picked from commit 7503376)
Co-authored-by: Mary Zhong <mary@clerk.dev>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@mzhong9723@SokratisVidros@panteliselef@clerk-cookie
, '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

fix(clerk-js): Fix FAPI initiated redirect flow for OAuth2 IDP flow with email_link verification - #2677

Merged
mzhong9723 merged 1 commit into
mainfrom
mz/core-1567-oauth-provider-email-link-verification
Jan 31, 2024
Merged

fix(clerk-js): Fix FAPI initiated redirect flow for OAuth2 IDP flow with email_link verification#2677
mzhong9723 merged 1 commit into
mainfrom
mz/core-1567-oauth-provider-email-link-verification

Conversation

@mzhong9723

@mzhong9723mzhong9723 commented Jan 29, 2024

Copy link
Copy Markdown
Member

Description

For the OAuth2 IDP flow, we should not redirect when the referrer is the sign up url. This way, a second factor can be completed after a first factor like email verification link. Previously, users were being redirected back to FAPI /oauth/authorize prematurely. This change ensures that users will not be redirected as such and have the chance to complete their second factor verification, like phone code.

Fixes CORE-1567

Video of fix below (there's a jump in the middle because I cut out retrieving the email link from my inbox):
https://github.com/clerk/javascript/assets/27433835/63e4ec43-1107-4c90-8ee5-f9196be7210c

Previously, the user would be redirected back to the sign in page without being able to complete sign up.

Checklist

  • npm test runs as expected.
  • npm run build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Packages affected

  • @clerk/backend
  • @clerk/chrome-extension
  • @clerk/clerk-js
  • @clerk/clerk-expo
  • @clerk/fastify
  • gatsby-plugin-clerk
  • @clerk/localizations
  • @clerk/nextjs
  • @clerk/clerk-react
  • @clerk/remix
  • @clerk/clerk-sdk-node
  • @clerk/shared
  • @clerk/themes
  • @clerk/types
  • build/tooling/chore

@changeset-bot

changeset-botBot commented Jan 29, 2024

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 575478b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@mzhong9723
mzhong9723 requested review from a team and octoper and removed request for a team and octoperJanuary 29, 2024 21:26

@panteliselefpanteliselef left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@mzhong9723 Seems like this was reported for v4 components and we should probably need to backport this PR to v4.

I will help with that once the PR is merged to main. Could we just add a description in the changeset ?

Comment on lines +1 to +3
---
---

@panteliselefpanteliselefJan 30, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Maybe something like this ?

Suggested change
---
---
---
'@clerk/clerk-js': patch
---
Fix redirect flow for OAuth2 IDP flow with email_link verification.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

Thanks @panteliselef, updated the changeset!

Comment threadpackages/clerk-js/src/core/clerk.ts Outdated
@@ -1615,9 +1615,11 @@ export class Clerk implements ClerkInterface {
const userSignedIn = this.session;
const signInUrl = this.#environment?.displayConfig.signInUrl;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

In ClerkJS both signInUrl and signUpUrl can be injected via ClerkOptions. These ClerkOptions come from CLERK_SIGN_IN_URL in frameworks such as Next.js. The display config settings are left as a fallback and are downplayed in v5.

So for this method, we should pick signInUrl and signUpUrl from ClerkOptions first.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

@SokratisVidros updated both sign in and sign up urls to use ClerkOptions first and display config urls as a second fallback option

@mzhong9723
mzhong9723force-pushed the mz/core-1567-oauth-provider-email-link-verification branch from 37851d3 to 6574d50CompareJanuary 30, 2024 15:37
@mzhong9723
mzhong9723force-pushed the mz/core-1567-oauth-provider-email-link-verification branch from 6574d50 to f5e6a4fCompareJanuary 30, 2024 15:41
Comment threadpackages/clerk-js/src/core/clerk.ts Outdated

const userSignedIn = this.session;
const signInUrl = this.#environment?.displayConfig.signInUrl;
const signInUrl = this.#options.signInUrl ? this.#options.signInUrl : this.#environment?.displayConfig.signInUrl;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Suggested change
constsignInUrl=this.#options.signInUrl? this.#options.signInUrl :this.#environment?.displayConfig.signInUrl;
constsignInUrl=this.#options.signInUrl||this.#environment?.displayConfig.signInUrl;

…ith email_link verification
For the OAuth2 IDP flow, we should not redirect when the referrer is
the sign up url. This way, the second factor can be completed
after a first factor like email verification link. Previously,
users were being redirected back to FAPI /oauth/authorize
prematurely. This change ensures that users will not be
redirected as such and have the chance to complete their second
factor verification, like phone code.
@mzhong9723
mzhong9723force-pushed the mz/core-1567-oauth-provider-email-link-verification branch from f5e6a4f to 575478bCompareJanuary 31, 2024 14:28
@mzhong9723
mzhong9723 added this pull request to the merge queue Jan 31, 2024
Merged via the queue into main with commit 7503376Jan 31, 2024
@mzhong9723
mzhong9723 deleted the mz/core-1567-oauth-provider-email-link-verification branch January 31, 2024 15:02
panteliselef pushed a commit that referenced this pull request Feb 1, 2024
…ith email_link verification (#2677)
For the OAuth2 IDP flow, we should not redirect when the referrer is
the sign up url. This way, the second factor can be completed
after a first factor like email verification link. Previously,
users were being redirected back to FAPI /oauth/authorize
prematurely. This change ensures that users will not be
redirected as such and have the chance to complete their second
factor verification, like phone code.
(cherry picked from commit 7503376)
github-merge-queueBot pushed a commit that referenced this pull request Feb 1, 2024
…ith email_link verification (#2677) (#2702)
For the OAuth2 IDP flow, we should not redirect when the referrer is
the sign up url. This way, the second factor can be completed
after a first factor like email verification link. Previously,
users were being redirected back to FAPI /oauth/authorize
prematurely. This change ensures that users will not be
redirected as such and have the chance to complete their second
factor verification, like phone code.
(cherry picked from commit 7503376)
Co-authored-by: Mary Zhong <mary@clerk.dev>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@mzhong9723@SokratisVidros@panteliselef@clerk-cookie
, '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

fix(clerk-js): Fix FAPI initiated redirect flow for OAuth2 IDP flow with email_link verification - #2677

Merged
mzhong9723 merged 1 commit into
mainfrom
mz/core-1567-oauth-provider-email-link-verification
Jan 31, 2024
Merged

fix(clerk-js): Fix FAPI initiated redirect flow for OAuth2 IDP flow with email_link verification#2677
mzhong9723 merged 1 commit into
mainfrom
mz/core-1567-oauth-provider-email-link-verification

Conversation

@mzhong9723

@mzhong9723mzhong9723 commented Jan 29, 2024

Copy link
Copy Markdown
Member

Description

For the OAuth2 IDP flow, we should not redirect when the referrer is the sign up url. This way, a second factor can be completed after a first factor like email verification link. Previously, users were being redirected back to FAPI /oauth/authorize prematurely. This change ensures that users will not be redirected as such and have the chance to complete their second factor verification, like phone code.

Fixes CORE-1567

Video of fix below (there's a jump in the middle because I cut out retrieving the email link from my inbox):
https://github.com/clerk/javascript/assets/27433835/63e4ec43-1107-4c90-8ee5-f9196be7210c

Previously, the user would be redirected back to the sign in page without being able to complete sign up.

Checklist

  • npm test runs as expected.
  • npm run build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Packages affected

  • @clerk/backend
  • @clerk/chrome-extension
  • @clerk/clerk-js
  • @clerk/clerk-expo
  • @clerk/fastify
  • gatsby-plugin-clerk
  • @clerk/localizations
  • @clerk/nextjs
  • @clerk/clerk-react
  • @clerk/remix
  • @clerk/clerk-sdk-node
  • @clerk/shared
  • @clerk/themes
  • @clerk/types
  • build/tooling/chore

@changeset-bot

changeset-botBot commented Jan 29, 2024

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 575478b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@mzhong9723
mzhong9723 requested review from a team and octoper and removed request for a team and octoperJanuary 29, 2024 21:26

@panteliselefpanteliselef left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@mzhong9723 Seems like this was reported for v4 components and we should probably need to backport this PR to v4.

I will help with that once the PR is merged to main. Could we just add a description in the changeset ?

Comment on lines +1 to +3
---
---

@panteliselefpanteliselefJan 30, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Maybe something like this ?

Suggested change
---
---
---
'@clerk/clerk-js': patch
---
Fix redirect flow for OAuth2 IDP flow with email_link verification.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

Thanks @panteliselef, updated the changeset!

Comment threadpackages/clerk-js/src/core/clerk.ts Outdated
@@ -1615,9 +1615,11 @@ export class Clerk implements ClerkInterface {
const userSignedIn = this.session;
const signInUrl = this.#environment?.displayConfig.signInUrl;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

In ClerkJS both signInUrl and signUpUrl can be injected via ClerkOptions. These ClerkOptions come from CLERK_SIGN_IN_URL in frameworks such as Next.js. The display config settings are left as a fallback and are downplayed in v5.

So for this method, we should pick signInUrl and signUpUrl from ClerkOptions first.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

@SokratisVidros updated both sign in and sign up urls to use ClerkOptions first and display config urls as a second fallback option

@mzhong9723
mzhong9723force-pushed the mz/core-1567-oauth-provider-email-link-verification branch from 37851d3 to 6574d50CompareJanuary 30, 2024 15:37
@mzhong9723
mzhong9723force-pushed the mz/core-1567-oauth-provider-email-link-verification branch from 6574d50 to f5e6a4fCompareJanuary 30, 2024 15:41
Comment threadpackages/clerk-js/src/core/clerk.ts Outdated

const userSignedIn = this.session;
const signInUrl = this.#environment?.displayConfig.signInUrl;
const signInUrl = this.#options.signInUrl ? this.#options.signInUrl : this.#environment?.displayConfig.signInUrl;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Suggested change
constsignInUrl=this.#options.signInUrl? this.#options.signInUrl :this.#environment?.displayConfig.signInUrl;
constsignInUrl=this.#options.signInUrl||this.#environment?.displayConfig.signInUrl;

…ith email_link verification
For the OAuth2 IDP flow, we should not redirect when the referrer is
the sign up url. This way, the second factor can be completed
after a first factor like email verification link. Previously,
users were being redirected back to FAPI /oauth/authorize
prematurely. This change ensures that users will not be
redirected as such and have the chance to complete their second
factor verification, like phone code.
@mzhong9723
mzhong9723force-pushed the mz/core-1567-oauth-provider-email-link-verification branch from f5e6a4f to 575478bCompareJanuary 31, 2024 14:28
@mzhong9723
mzhong9723 added this pull request to the merge queue Jan 31, 2024
Merged via the queue into main with commit 7503376Jan 31, 2024
@mzhong9723
mzhong9723 deleted the mz/core-1567-oauth-provider-email-link-verification branch January 31, 2024 15:02
panteliselef pushed a commit that referenced this pull request Feb 1, 2024
…ith email_link verification (#2677)
For the OAuth2 IDP flow, we should not redirect when the referrer is
the sign up url. This way, the second factor can be completed
after a first factor like email verification link. Previously,
users were being redirected back to FAPI /oauth/authorize
prematurely. This change ensures that users will not be
redirected as such and have the chance to complete their second
factor verification, like phone code.
(cherry picked from commit 7503376)
github-merge-queueBot pushed a commit that referenced this pull request Feb 1, 2024
…ith email_link verification (#2677) (#2702)
For the OAuth2 IDP flow, we should not redirect when the referrer is
the sign up url. This way, the second factor can be completed
after a first factor like email verification link. Previously,
users were being redirected back to FAPI /oauth/authorize
prematurely. This change ensures that users will not be
redirected as such and have the chance to complete their second
factor verification, like phone code.
(cherry picked from commit 7503376)
Co-authored-by: Mary Zhong <mary@clerk.dev>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@mzhong9723@SokratisVidros@panteliselef@clerk-cookie
, '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

fix(clerk-js): Fix FAPI initiated redirect flow for OAuth2 IDP flow with email_link verification - #2677

Merged
mzhong9723 merged 1 commit into
mainfrom
mz/core-1567-oauth-provider-email-link-verification
Jan 31, 2024
Merged

fix(clerk-js): Fix FAPI initiated redirect flow for OAuth2 IDP flow with email_link verification#2677
mzhong9723 merged 1 commit into
mainfrom
mz/core-1567-oauth-provider-email-link-verification

Conversation

@mzhong9723

@mzhong9723mzhong9723 commented Jan 29, 2024

Copy link
Copy Markdown
Member

Description

For the OAuth2 IDP flow, we should not redirect when the referrer is the sign up url. This way, a second factor can be completed after a first factor like email verification link. Previously, users were being redirected back to FAPI /oauth/authorize prematurely. This change ensures that users will not be redirected as such and have the chance to complete their second factor verification, like phone code.

Fixes CORE-1567

Video of fix below (there's a jump in the middle because I cut out retrieving the email link from my inbox):
https://github.com/clerk/javascript/assets/27433835/63e4ec43-1107-4c90-8ee5-f9196be7210c

Previously, the user would be redirected back to the sign in page without being able to complete sign up.

Checklist

  • npm test runs as expected.
  • npm run build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Packages affected

  • @clerk/backend
  • @clerk/chrome-extension
  • @clerk/clerk-js
  • @clerk/clerk-expo
  • @clerk/fastify
  • gatsby-plugin-clerk
  • @clerk/localizations
  • @clerk/nextjs
  • @clerk/clerk-react
  • @clerk/remix
  • @clerk/clerk-sdk-node
  • @clerk/shared
  • @clerk/themes
  • @clerk/types
  • build/tooling/chore

@changeset-bot

changeset-botBot commented Jan 29, 2024

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 575478b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@mzhong9723
mzhong9723 requested review from a team and octoper and removed request for a team and octoperJanuary 29, 2024 21:26

@panteliselefpanteliselef left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@mzhong9723 Seems like this was reported for v4 components and we should probably need to backport this PR to v4.

I will help with that once the PR is merged to main. Could we just add a description in the changeset ?

Comment on lines +1 to +3
---
---

@panteliselefpanteliselefJan 30, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Maybe something like this ?

Suggested change
---
---
---
'@clerk/clerk-js': patch
---
Fix redirect flow for OAuth2 IDP flow with email_link verification.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

Thanks @panteliselef, updated the changeset!

Comment threadpackages/clerk-js/src/core/clerk.ts Outdated
@@ -1615,9 +1615,11 @@ export class Clerk implements ClerkInterface {
const userSignedIn = this.session;
const signInUrl = this.#environment?.displayConfig.signInUrl;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

In ClerkJS both signInUrl and signUpUrl can be injected via ClerkOptions. These ClerkOptions come from CLERK_SIGN_IN_URL in frameworks such as Next.js. The display config settings are left as a fallback and are downplayed in v5.

So for this method, we should pick signInUrl and signUpUrl from ClerkOptions first.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

@SokratisVidros updated both sign in and sign up urls to use ClerkOptions first and display config urls as a second fallback option

@mzhong9723
mzhong9723force-pushed the mz/core-1567-oauth-provider-email-link-verification branch from 37851d3 to 6574d50CompareJanuary 30, 2024 15:37
@mzhong9723
mzhong9723force-pushed the mz/core-1567-oauth-provider-email-link-verification branch from 6574d50 to f5e6a4fCompareJanuary 30, 2024 15:41
Comment threadpackages/clerk-js/src/core/clerk.ts Outdated

const userSignedIn = this.session;
const signInUrl = this.#environment?.displayConfig.signInUrl;
const signInUrl = this.#options.signInUrl ? this.#options.signInUrl : this.#environment?.displayConfig.signInUrl;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Suggested change
constsignInUrl=this.#options.signInUrl? this.#options.signInUrl :this.#environment?.displayConfig.signInUrl;
constsignInUrl=this.#options.signInUrl||this.#environment?.displayConfig.signInUrl;

…ith email_link verification
For the OAuth2 IDP flow, we should not redirect when the referrer is
the sign up url. This way, the second factor can be completed
after a first factor like email verification link. Previously,
users were being redirected back to FAPI /oauth/authorize
prematurely. This change ensures that users will not be
redirected as such and have the chance to complete their second
factor verification, like phone code.
@mzhong9723
mzhong9723force-pushed the mz/core-1567-oauth-provider-email-link-verification branch from f5e6a4f to 575478bCompareJanuary 31, 2024 14:28
@mzhong9723
mzhong9723 added this pull request to the merge queue Jan 31, 2024
Merged via the queue into main with commit 7503376Jan 31, 2024
@mzhong9723
mzhong9723 deleted the mz/core-1567-oauth-provider-email-link-verification branch January 31, 2024 15:02
panteliselef pushed a commit that referenced this pull request Feb 1, 2024
…ith email_link verification (#2677)
For the OAuth2 IDP flow, we should not redirect when the referrer is
the sign up url. This way, the second factor can be completed
after a first factor like email verification link. Previously,
users were being redirected back to FAPI /oauth/authorize
prematurely. This change ensures that users will not be
redirected as such and have the chance to complete their second
factor verification, like phone code.
(cherry picked from commit 7503376)
github-merge-queueBot pushed a commit that referenced this pull request Feb 1, 2024
…ith email_link verification (#2677) (#2702)
For the OAuth2 IDP flow, we should not redirect when the referrer is
the sign up url. This way, the second factor can be completed
after a first factor like email verification link. Previously,
users were being redirected back to FAPI /oauth/authorize
prematurely. This change ensures that users will not be
redirected as such and have the chance to complete their second
factor verification, like phone code.
(cherry picked from commit 7503376)
Co-authored-by: Mary Zhong <mary@clerk.dev>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@mzhong9723@SokratisVidros@panteliselef@clerk-cookie
, '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

fix(clerk-js): Fix FAPI initiated redirect flow for OAuth2 IDP flow with email_link verification - #2677

Merged
mzhong9723 merged 1 commit into
mainfrom
mz/core-1567-oauth-provider-email-link-verification
Jan 31, 2024
Merged

fix(clerk-js): Fix FAPI initiated redirect flow for OAuth2 IDP flow with email_link verification#2677
mzhong9723 merged 1 commit into
mainfrom
mz/core-1567-oauth-provider-email-link-verification

Conversation

@mzhong9723

@mzhong9723mzhong9723 commented Jan 29, 2024

Copy link
Copy Markdown
Member

Description

For the OAuth2 IDP flow, we should not redirect when the referrer is the sign up url. This way, a second factor can be completed after a first factor like email verification link. Previously, users were being redirected back to FAPI /oauth/authorize prematurely. This change ensures that users will not be redirected as such and have the chance to complete their second factor verification, like phone code.

Fixes CORE-1567

Video of fix below (there's a jump in the middle because I cut out retrieving the email link from my inbox):
https://github.com/clerk/javascript/assets/27433835/63e4ec43-1107-4c90-8ee5-f9196be7210c

Previously, the user would be redirected back to the sign in page without being able to complete sign up.

Checklist

  • npm test runs as expected.
  • npm run build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Packages affected

  • @clerk/backend
  • @clerk/chrome-extension
  • @clerk/clerk-js
  • @clerk/clerk-expo
  • @clerk/fastify
  • gatsby-plugin-clerk
  • @clerk/localizations
  • @clerk/nextjs
  • @clerk/clerk-react
  • @clerk/remix
  • @clerk/clerk-sdk-node
  • @clerk/shared
  • @clerk/themes
  • @clerk/types
  • build/tooling/chore

@changeset-bot

changeset-botBot commented Jan 29, 2024

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 575478b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@mzhong9723
mzhong9723 requested review from a team and octoper and removed request for a team and octoperJanuary 29, 2024 21:26

@panteliselefpanteliselef left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@mzhong9723 Seems like this was reported for v4 components and we should probably need to backport this PR to v4.

I will help with that once the PR is merged to main. Could we just add a description in the changeset ?

Comment on lines +1 to +3
---
---

@panteliselefpanteliselefJan 30, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Maybe something like this ?

Suggested change
---
---
---
'@clerk/clerk-js': patch
---
Fix redirect flow for OAuth2 IDP flow with email_link verification.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

Thanks @panteliselef, updated the changeset!

Comment threadpackages/clerk-js/src/core/clerk.ts Outdated
@@ -1615,9 +1615,11 @@ export class Clerk implements ClerkInterface {
const userSignedIn = this.session;
const signInUrl = this.#environment?.displayConfig.signInUrl;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

In ClerkJS both signInUrl and signUpUrl can be injected via ClerkOptions. These ClerkOptions come from CLERK_SIGN_IN_URL in frameworks such as Next.js. The display config settings are left as a fallback and are downplayed in v5.

So for this method, we should pick signInUrl and signUpUrl from ClerkOptions first.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

@SokratisVidros updated both sign in and sign up urls to use ClerkOptions first and display config urls as a second fallback option

@mzhong9723
mzhong9723force-pushed the mz/core-1567-oauth-provider-email-link-verification branch from 37851d3 to 6574d50CompareJanuary 30, 2024 15:37
@mzhong9723
mzhong9723force-pushed the mz/core-1567-oauth-provider-email-link-verification branch from 6574d50 to f5e6a4fCompareJanuary 30, 2024 15:41
Comment threadpackages/clerk-js/src/core/clerk.ts Outdated

const userSignedIn = this.session;
const signInUrl = this.#environment?.displayConfig.signInUrl;
const signInUrl = this.#options.signInUrl ? this.#options.signInUrl : this.#environment?.displayConfig.signInUrl;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Suggested change
constsignInUrl=this.#options.signInUrl? this.#options.signInUrl :this.#environment?.displayConfig.signInUrl;
constsignInUrl=this.#options.signInUrl||this.#environment?.displayConfig.signInUrl;

…ith email_link verification
For the OAuth2 IDP flow, we should not redirect when the referrer is
the sign up url. This way, the second factor can be completed
after a first factor like email verification link. Previously,
users were being redirected back to FAPI /oauth/authorize
prematurely. This change ensures that users will not be
redirected as such and have the chance to complete their second
factor verification, like phone code.
@mzhong9723
mzhong9723force-pushed the mz/core-1567-oauth-provider-email-link-verification branch from f5e6a4f to 575478bCompareJanuary 31, 2024 14:28
@mzhong9723
mzhong9723 added this pull request to the merge queue Jan 31, 2024
Merged via the queue into main with commit 7503376Jan 31, 2024
@mzhong9723
mzhong9723 deleted the mz/core-1567-oauth-provider-email-link-verification branch January 31, 2024 15:02
panteliselef pushed a commit that referenced this pull request Feb 1, 2024
…ith email_link verification (#2677)
For the OAuth2 IDP flow, we should not redirect when the referrer is
the sign up url. This way, the second factor can be completed
after a first factor like email verification link. Previously,
users were being redirected back to FAPI /oauth/authorize
prematurely. This change ensures that users will not be
redirected as such and have the chance to complete their second
factor verification, like phone code.
(cherry picked from commit 7503376)
github-merge-queueBot pushed a commit that referenced this pull request Feb 1, 2024
…ith email_link verification (#2677) (#2702)
For the OAuth2 IDP flow, we should not redirect when the referrer is
the sign up url. This way, the second factor can be completed
after a first factor like email verification link. Previously,
users were being redirected back to FAPI /oauth/authorize
prematurely. This change ensures that users will not be
redirected as such and have the chance to complete their second
factor verification, like phone code.
(cherry picked from commit 7503376)
Co-authored-by: Mary Zhong <mary@clerk.dev>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@mzhong9723@SokratisVidros@panteliselef@clerk-cookie