Skip to content

Commit

Permalink
adds clearing of login attempt info in passwordless login
Browse files Browse the repository at this point in the history
  • Loading branch information
@rishabhpoddar
rishabhpoddar committed Dec 11, 2023
1 parent 9dbabbe commit 719d8a9
Show file tree
Hide file tree
Showing 5 changed files with 114 additions and 8 deletions.
30 changes: 28 additions & 2 deletions v2/passwordless/custom-ui/login-magic-link.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -315,7 +315,7 @@ After sending the initial magic link to the user, you may want to display a rese
<TabItem value="npm">

```tsx
import { ^{webJsResendPasswordlessCode} } from "supertokens-web-js/recipe/^{codeImportRecipeName}";
import { ^{webJsResendPasswordlessCode}, ^{clearPasswordlessLoginAttemptInfo} } from "supertokens-web-js/recipe/^{codeImportRecipeName}";

async function resendMagicLink() {
try {
Expand All @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -503,13 +513,16 @@ On page load, you can consume the magic link by calling the following function
<TabItem value="npm">

```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 {
Expand All @@ -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")
}
Expand All @@ -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 {
Expand All @@ -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")
}
Expand Down
30 changes: 28 additions & 2 deletions v2/passwordless/custom-ui/login-otp.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,7 @@ After sending the initial OTP to the user, you may want to display a resend butt
<TabItem value="npm">

```tsx
import { ^{webJsResendPasswordlessCode} } from "supertokens-web-js/recipe/^{codeImportRecipeName}";
import { ^{webJsResendPasswordlessCode}, ^{clearPasswordlessLoginAttemptInfo} } from "supertokens-web-js/recipe/^{codeImportRecipeName}";

async function resendOTP() {
try {
Expand All @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -317,7 +327,7 @@ When the user enters an OTP, you want to call the following API to verify it
<TabItem value="npm">

```tsx
import { ^{webJsConsumePasswordlessCode} } from "supertokens-web-js/recipe/^{codeImportRecipeName}";
import { ^{webJsConsumePasswordlessCode}, ^{clearPasswordlessLoginAttemptInfo} } from "supertokens-web-js/recipe/^{codeImportRecipeName}";

async function handleOTPInput(otp: string) {
try {
Expand All @@ -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 {
Expand All @@ -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")
}
Expand All @@ -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 {
Expand All @@ -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")
}
Expand Down
2 changes: 2 additions & 0 deletions v2/src/plugins/markdownVariables.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,7 @@
"pythonSignInUpFeatureEnd": ")"
},
"passwordless": {
"clearPasswordlessLoginAttemptInfo": "clearLoginAttemptInfo",
"nodePasswordlessSignInUp": "signInUp",
"goPasswordlessSignInUp": "SignInUpByEmail",
"pythonPasswordlessSignInUp": "signinup",
Expand Down Expand Up @@ -246,6 +247,7 @@
"pythonSignInUpFeatureEnd": "# typecheck-only, removed from output"
},
"thirdpartypasswordless": {
"clearPasswordlessLoginAttemptInfo": "clearPasswordlessLoginAttemptInfo",
"nodePasswordlessSignInUp": "passwordlessSignInUp",
"goPasswordlessSignInUp": "PasswordlessSignInUpByEmail",
"pythonPasswordlessSignInUp": "passwordless_signinup",
Expand Down
30 changes: 28 additions & 2 deletions v2/thirdpartypasswordless/custom-ui/login-magic-link.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -315,7 +315,7 @@ After sending the initial magic link to the user, you may want to display a rese
<TabItem value="npm">

```tsx
import { ^{webJsResendPasswordlessCode} } from "supertokens-web-js/recipe/^{codeImportRecipeName}";
import { ^{webJsResendPasswordlessCode}, ^{clearPasswordlessLoginAttemptInfo} } from "supertokens-web-js/recipe/^{codeImportRecipeName}";

async function resendMagicLink() {
try {
Expand All @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -503,13 +513,16 @@ On page load, you can consume the magic link by calling the following function
<TabItem value="npm">

```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 {
Expand All @@ -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")
}
Expand All @@ -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 {
Expand All @@ -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")
}
Expand Down
30 changes: 28 additions & 2 deletions v2/thirdpartypasswordless/custom-ui/login-otp.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,7 @@ After sending the initial OTP to the user, you may want to display a resend butt
<TabItem value="npm">

```tsx
import { ^{webJsResendPasswordlessCode} } from "supertokens-web-js/recipe/^{codeImportRecipeName}";
import { ^{webJsResendPasswordlessCode}, ^{clearPasswordlessLoginAttemptInfo} } from "supertokens-web-js/recipe/^{codeImportRecipeName}";

async function resendOTP() {
try {
Expand All @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -317,7 +327,7 @@ When the user enters an OTP, you want to call the following API to verify it
<TabItem value="npm">

```tsx
import { ^{webJsConsumePasswordlessCode} } from "supertokens-web-js/recipe/^{codeImportRecipeName}";
import { ^{webJsConsumePasswordlessCode}, ^{clearPasswordlessLoginAttemptInfo} } from "supertokens-web-js/recipe/^{codeImportRecipeName}";

async function handleOTPInput(otp: string) {
try {
Expand All @@ -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 {
Expand All @@ -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")
}
Expand All @@ -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 {
Expand All @@ -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")
}
Expand Down

0 comments on commit 719d8a9

Please sign in to comment.