From 719d8a96db053748576355175086acd2d2b3f0db Mon Sep 17 00:00:00 2001 From: rishabhpoddar Date: Mon, 11 Dec 2023 17:22:32 +0530 Subject: [PATCH] adds clearing of login attempt info in passwordless login --- .../custom-ui/login-magic-link.mdx | 30 +++++++++++++++++-- v2/passwordless/custom-ui/login-otp.mdx | 30 +++++++++++++++++-- v2/src/plugins/markdownVariables.json | 2 ++ .../custom-ui/login-magic-link.mdx | 30 +++++++++++++++++-- .../custom-ui/login-otp.mdx | 30 +++++++++++++++++-- 5 files changed, 114 insertions(+), 8 deletions(-) diff --git a/v2/passwordless/custom-ui/login-magic-link.mdx b/v2/passwordless/custom-ui/login-magic-link.mdx index 69244d6ca..64bfe0ffb 100644 --- a/v2/passwordless/custom-ui/login-magic-link.mdx +++ b/v2/passwordless/custom-ui/login-magic-link.mdx @@ -315,7 +315,7 @@ After sending the initial magic link to the user, you may want to display a rese ```tsx -import { ^{webJsResendPasswordlessCode} } from "supertokens-web-js/recipe/^{codeImportRecipeName}"; +import { ^{webJsResendPasswordlessCode}, ^{clearPasswordlessLoginAttemptInfo} } from "supertokens-web-js/recipe/^{codeImportRecipeName}"; async function resendMagicLink() { try { @@ -324,6 +324,11 @@ async function resendMagicLink() { if (response.status === "RESTART_FLOW_ERROR") { // this can happen if the user has already successfully logged in into // another device whilst also trying to login to this one. + + // we clear the login attempt info that was added when the createCode function + // was called - so that if the user does a page reload, they will now see the + // enter email / phone UI again. + await ^{clearPasswordlessLoginAttemptInfo}(); window.alert("Login failed. Please try again"); window.location.assign("/auth") } else { @@ -353,6 +358,11 @@ async function resendMagicLink() { if (response.status === "RESTART_FLOW_ERROR") { // this can happen if the user has already successfully logged in into // another device whilst also trying to login to this one. + + // we clear the login attempt info that was added when the createCode function + // was called - so that if the user does a page reload, they will now see the + // enter email / phone UI again. + await supertokens^{recipeNameCapitalLetters}.^{clearPasswordlessLoginAttemptInfo}(); window.alert("Login failed. Please try again"); window.location.assign("/auth") } else { @@ -503,13 +513,16 @@ On page load, you can consume the magic link by calling the following function ```tsx -import { ^{webJsConsumePasswordlessCode} } from "supertokens-web-js/recipe/^{codeImportRecipeName}"; +import { ^{webJsConsumePasswordlessCode}, ^{clearPasswordlessLoginAttemptInfo} } from "supertokens-web-js/recipe/^{codeImportRecipeName}"; async function handleMagicLinkClicked() { try { let response = await ^{webJsConsumePasswordlessCode}(); if (response.status === "OK") { + // we clear the login attempt info that was added when the createCode function + // was called since the login was successful. + await ^{clearPasswordlessLoginAttemptInfo}(); if (response.createdNewRecipeUser && response.user.loginMethods.length === 1) { // user sign up success } else { @@ -519,6 +532,11 @@ async function handleMagicLinkClicked() { } else { // this can happen if the magic link has expired or is invalid // or if it was denied due to security reasons in case of automatic account linking + + // we clear the login attempt info that was added when the createCode function + // was called - so that if the user does a page reload, they will now see the + // enter email / phone UI again. + await ^{clearPasswordlessLoginAttemptInfo}(); window.alert("Login failed. Please try again"); window.location.assign("/auth") } @@ -543,6 +561,9 @@ async function handleMagicLinkClicked() { let response = await supertokens^{recipeNameCapitalLetters}.^{webJsConsumePasswordlessCode}(); if (response.status === "OK") { + // we clear the login attempt info that was added when the createCode function + // was called since the login was successful. + await supertokens^{recipeNameCapitalLetters}.^{clearPasswordlessLoginAttemptInfo}(); if (response.createdNewRecipeUser && response.user.loginMethods.length === 1) { // user sign up success } else { @@ -552,6 +573,11 @@ async function handleMagicLinkClicked() { } else { // this can happen if the magic link has expired or is invalid // or if it was denied due to security reasons in case of automatic account linking + + // we clear the login attempt info that was added when the createCode function + // was called - so that if the user does a page reload, they will now see the + // enter email / phone UI again. + await supertokens^{recipeNameCapitalLetters}.^{clearPasswordlessLoginAttemptInfo}(); window.alert("Login failed. Please try again"); window.location.assign("/auth") } diff --git a/v2/passwordless/custom-ui/login-otp.mdx b/v2/passwordless/custom-ui/login-otp.mdx index 8fcd80341..9a978d7b9 100644 --- a/v2/passwordless/custom-ui/login-otp.mdx +++ b/v2/passwordless/custom-ui/login-otp.mdx @@ -174,7 +174,7 @@ After sending the initial OTP to the user, you may want to display a resend butt ```tsx -import { ^{webJsResendPasswordlessCode} } from "supertokens-web-js/recipe/^{codeImportRecipeName}"; +import { ^{webJsResendPasswordlessCode}, ^{clearPasswordlessLoginAttemptInfo} } from "supertokens-web-js/recipe/^{codeImportRecipeName}"; async function resendOTP() { try { @@ -183,6 +183,11 @@ async function resendOTP() { if (response.status === "RESTART_FLOW_ERROR") { // this can happen if the user has already successfully logged in into // another device whilst also trying to login to this one. + + // we clear the login attempt info that was added when the createCode function + // was called - so that if the user does a page reload, they will now see the + // enter email / phone UI again. + await ^{clearPasswordlessLoginAttemptInfo}(); window.alert("Login failed. Please try again"); window.location.assign("/auth") } else { @@ -212,6 +217,11 @@ async function resendOTP() { if (response.status === "RESTART_FLOW_ERROR") { // this can happen if the user has already successfully logged in into // another device whilst also trying to login to this one. + + // we clear the login attempt info that was added when the createCode function + // was called - so that if the user does a page reload, they will now see the + // enter email / phone UI again. + await supertokens^{recipeNameCapitalLetters}.^{clearPasswordlessLoginAttemptInfo}(); window.alert("Login failed. Please try again"); window.location.assign("/auth") } else { @@ -317,7 +327,7 @@ When the user enters an OTP, you want to call the following API to verify it ```tsx -import { ^{webJsConsumePasswordlessCode} } from "supertokens-web-js/recipe/^{codeImportRecipeName}"; +import { ^{webJsConsumePasswordlessCode}, ^{clearPasswordlessLoginAttemptInfo} } from "supertokens-web-js/recipe/^{codeImportRecipeName}"; async function handleOTPInput(otp: string) { try { @@ -326,6 +336,9 @@ async function handleOTPInput(otp: string) { }); if (response.status === "OK") { + // we clear the login attempt info that was added when the createCode function + // was called since the login was successful. + await ^{clearPasswordlessLoginAttemptInfo}(); if (response.createdNewRecipeUser && response.user.loginMethods.length === 1) { // user sign up success } else { @@ -342,6 +355,11 @@ async function handleOTPInput(otp: string) { } else { // this can happen if the user tried an incorrect OTP too many times. // or if it was denied due to security reasons in case of automatic account linking + + // we clear the login attempt info that was added when the createCode function + // was called - so that if the user does a page reload, they will now see the + // enter email / phone UI again. + await ^{clearPasswordlessLoginAttemptInfo}(); window.alert("Login failed. Please try again"); window.location.assign("/auth") } @@ -368,6 +386,9 @@ async function handleOTPInput(otp: string) { }); if (response.status === "OK") { + // we clear the login attempt info that was added when the createCode function + // was called since the login was successful. + await supertokens^{recipeNameCapitalLetters}.^{clearPasswordlessLoginAttemptInfo}(); if (response.createdNewRecipeUser && response.user.loginMethods.length === 1) { // user sign up success } else { @@ -384,6 +405,11 @@ async function handleOTPInput(otp: string) { } else { // this can happen if the user tried an incorrect OTP too many times. // or if it was denied due to security reasons in case of automatic account linking + + // we clear the login attempt info that was added when the createCode function + // was called - so that if the user does a page reload, they will now see the + // enter email / phone UI again. + await supertokens^{recipeNameCapitalLetters}.^{clearPasswordlessLoginAttemptInfo}(); window.alert("Login failed. Please try again"); window.location.assign("/auth") } diff --git a/v2/src/plugins/markdownVariables.json b/v2/src/plugins/markdownVariables.json index ce3bceaec..13dc5220f 100644 --- a/v2/src/plugins/markdownVariables.json +++ b/v2/src/plugins/markdownVariables.json @@ -162,6 +162,7 @@ "pythonSignInUpFeatureEnd": ")" }, "passwordless": { + "clearPasswordlessLoginAttemptInfo": "clearLoginAttemptInfo", "nodePasswordlessSignInUp": "signInUp", "goPasswordlessSignInUp": "SignInUpByEmail", "pythonPasswordlessSignInUp": "signinup", @@ -246,6 +247,7 @@ "pythonSignInUpFeatureEnd": "# typecheck-only, removed from output" }, "thirdpartypasswordless": { + "clearPasswordlessLoginAttemptInfo": "clearPasswordlessLoginAttemptInfo", "nodePasswordlessSignInUp": "passwordlessSignInUp", "goPasswordlessSignInUp": "PasswordlessSignInUpByEmail", "pythonPasswordlessSignInUp": "passwordless_signinup", diff --git a/v2/thirdpartypasswordless/custom-ui/login-magic-link.mdx b/v2/thirdpartypasswordless/custom-ui/login-magic-link.mdx index 4ad1f8f9f..b385f8ea6 100644 --- a/v2/thirdpartypasswordless/custom-ui/login-magic-link.mdx +++ b/v2/thirdpartypasswordless/custom-ui/login-magic-link.mdx @@ -315,7 +315,7 @@ After sending the initial magic link to the user, you may want to display a rese ```tsx -import { ^{webJsResendPasswordlessCode} } from "supertokens-web-js/recipe/^{codeImportRecipeName}"; +import { ^{webJsResendPasswordlessCode}, ^{clearPasswordlessLoginAttemptInfo} } from "supertokens-web-js/recipe/^{codeImportRecipeName}"; async function resendMagicLink() { try { @@ -324,6 +324,11 @@ async function resendMagicLink() { if (response.status === "RESTART_FLOW_ERROR") { // this can happen if the user has already successfully logged in into // another device whilst also trying to login to this one. + + // we clear the login attempt info that was added when the createCode function + // was called - so that if the user does a page reload, they will now see the + // enter email / phone UI again. + await ^{clearPasswordlessLoginAttemptInfo}(); window.alert("Login failed. Please try again"); window.location.assign("/auth") } else { @@ -353,6 +358,11 @@ async function resendMagicLink() { if (response.status === "RESTART_FLOW_ERROR") { // this can happen if the user has already successfully logged in into // another device whilst also trying to login to this one. + + // we clear the login attempt info that was added when the createCode function + // was called - so that if the user does a page reload, they will now see the + // enter email / phone UI again. + await supertokens^{recipeNameCapitalLetters}.^{clearPasswordlessLoginAttemptInfo}(); window.alert("Login failed. Please try again"); window.location.assign("/auth") } else { @@ -503,13 +513,16 @@ On page load, you can consume the magic link by calling the following function ```tsx -import { ^{webJsConsumePasswordlessCode} } from "supertokens-web-js/recipe/^{codeImportRecipeName}"; +import { ^{webJsConsumePasswordlessCode}, ^{clearPasswordlessLoginAttemptInfo} } from "supertokens-web-js/recipe/^{codeImportRecipeName}"; async function handleMagicLinkClicked() { try { let response = await ^{webJsConsumePasswordlessCode}(); if (response.status === "OK") { + // we clear the login attempt info that was added when the createCode function + // was called since the login was successful. + await ^{clearPasswordlessLoginAttemptInfo}(); if (response.createdNewRecipeUser && response.user.loginMethods.length === 1) { // user sign up success } else { @@ -519,6 +532,11 @@ async function handleMagicLinkClicked() { } else { // this can happen if the magic link has expired or is invalid // or if it was denied due to security reasons in case of automatic account linking + + // we clear the login attempt info that was added when the createCode function + // was called - so that if the user does a page reload, they will now see the + // enter email / phone UI again. + await ^{clearPasswordlessLoginAttemptInfo}(); window.alert("Login failed. Please try again"); window.location.assign("/auth") } @@ -543,6 +561,9 @@ async function handleMagicLinkClicked() { let response = await supertokens^{recipeNameCapitalLetters}.^{webJsConsumePasswordlessCode}(); if (response.status === "OK") { + // we clear the login attempt info that was added when the createCode function + // was called since the login was successful. + await supertokens^{recipeNameCapitalLetters}.^{clearPasswordlessLoginAttemptInfo}(); if (response.createdNewRecipeUser && response.user.loginMethods.length === 1) { // user sign up success } else { @@ -552,6 +573,11 @@ async function handleMagicLinkClicked() { } else { // this can happen if the magic link has expired or is invalid // or if it was denied due to security reasons in case of automatic account linking + + // we clear the login attempt info that was added when the createCode function + // was called - so that if the user does a page reload, they will now see the + // enter email / phone UI again. + await supertokens^{recipeNameCapitalLetters}.^{clearPasswordlessLoginAttemptInfo}(); window.alert("Login failed. Please try again"); window.location.assign("/auth") } diff --git a/v2/thirdpartypasswordless/custom-ui/login-otp.mdx b/v2/thirdpartypasswordless/custom-ui/login-otp.mdx index 148cf19b3..8ee19c674 100644 --- a/v2/thirdpartypasswordless/custom-ui/login-otp.mdx +++ b/v2/thirdpartypasswordless/custom-ui/login-otp.mdx @@ -174,7 +174,7 @@ After sending the initial OTP to the user, you may want to display a resend butt ```tsx -import { ^{webJsResendPasswordlessCode} } from "supertokens-web-js/recipe/^{codeImportRecipeName}"; +import { ^{webJsResendPasswordlessCode}, ^{clearPasswordlessLoginAttemptInfo} } from "supertokens-web-js/recipe/^{codeImportRecipeName}"; async function resendOTP() { try { @@ -183,6 +183,11 @@ async function resendOTP() { if (response.status === "RESTART_FLOW_ERROR") { // this can happen if the user has already successfully logged in into // another device whilst also trying to login to this one. + + // we clear the login attempt info that was added when the createCode function + // was called - so that if the user does a page reload, they will now see the + // enter email / phone UI again. + await ^{clearPasswordlessLoginAttemptInfo}(); window.alert("Login failed. Please try again"); window.location.assign("/auth") } else { @@ -212,6 +217,11 @@ async function resendOTP() { if (response.status === "RESTART_FLOW_ERROR") { // this can happen if the user has already successfully logged in into // another device whilst also trying to login to this one. + + // we clear the login attempt info that was added when the createCode function + // was called - so that if the user does a page reload, they will now see the + // enter email / phone UI again. + await supertokens^{recipeNameCapitalLetters}.^{clearPasswordlessLoginAttemptInfo}(); window.alert("Login failed. Please try again"); window.location.assign("/auth") } else { @@ -317,7 +327,7 @@ When the user enters an OTP, you want to call the following API to verify it ```tsx -import { ^{webJsConsumePasswordlessCode} } from "supertokens-web-js/recipe/^{codeImportRecipeName}"; +import { ^{webJsConsumePasswordlessCode}, ^{clearPasswordlessLoginAttemptInfo} } from "supertokens-web-js/recipe/^{codeImportRecipeName}"; async function handleOTPInput(otp: string) { try { @@ -326,6 +336,9 @@ async function handleOTPInput(otp: string) { }); if (response.status === "OK") { + // we clear the login attempt info that was added when the createCode function + // was called since the login was successful. + await ^{clearPasswordlessLoginAttemptInfo}(); if (response.createdNewRecipeUser && response.user.loginMethods.length === 1) { // user sign up success } else { @@ -342,6 +355,11 @@ async function handleOTPInput(otp: string) { } else { // this can happen if the user tried an incorrect OTP too many times. // or if it was denied due to security reasons in case of automatic account linking + + // we clear the login attempt info that was added when the createCode function + // was called - so that if the user does a page reload, they will now see the + // enter email / phone UI again. + await ^{clearPasswordlessLoginAttemptInfo}(); window.alert("Login failed. Please try again"); window.location.assign("/auth") } @@ -368,6 +386,9 @@ async function handleOTPInput(otp: string) { }); if (response.status === "OK") { + // we clear the login attempt info that was added when the createCode function + // was called since the login was successful. + await supertokens^{recipeNameCapitalLetters}.^{clearPasswordlessLoginAttemptInfo}(); if (response.createdNewRecipeUser && response.user.loginMethods.length === 1) { // user sign up success } else { @@ -384,6 +405,11 @@ async function handleOTPInput(otp: string) { } else { // this can happen if the user tried an incorrect OTP too many times. // or if it was denied due to security reasons in case of automatic account linking + + // we clear the login attempt info that was added when the createCode function + // was called - so that if the user does a page reload, they will now see the + // enter email / phone UI again. + await supertokens^{recipeNameCapitalLetters}.^{clearPasswordlessLoginAttemptInfo}(); window.alert("Login failed. Please try again"); window.location.assign("/auth") }