And tag @supertokensio

😇

definitely. Thanks for this project. Keep up the good work 👍

@User as per your question about adding a lockout functionality, here is how you can implement it: https://gist.github.com/rishabhpoddar/6fe2b98ac1e09aafcba4a7307027097e - You will need to implement

isLockedOut

,

clearLoginAttemptCount

,

getLoginAttemptCount

,

lockOutEmail

and

setLoginAttemptCount

to talk to your own db. - The

isLockedOut

function will return

true

if the email is locked and it's been <= 10 mins since the email was locked (as per your requirement). - Sending

WRONG_CREDENTIALS_ERROR

if

isLockedOut

, will display that the entered credentials are incorrect on the frontend. This might be the best thing to do from a security point of view, but you can also throw an error and catch it in your own app error handler and then send a custom response to the frontend. - You can even override other functions like

createResetPasswordToken

to check if the email is locked out and if it is, then prevent the user from doing a password reset flow.

Hello there, I'm front-end Reactjs developer I've been reading about Supertokens lately, and I have some questions in mind I'm working on Nextjs with MUI project and been wondering if I can customize authentication page provided by Supertokens, my goal is to split Signin and Signup component into two different pages and to redesign them to fit my user interface thus to match the context.

I see. Which recipe are you using?

For now we are using email and password

Got it. So for customisation of CSS, you can see https://supertokens.io/docs/emailpassword/common-customizations/styling/changing-style To embed a component in your existing page, you can see: 1) https://supertokens.io/docs/emailpassword/common-customizations/embed-sign-in-up-form 2) https://supertokens.io/docs/emailpassword/common-customizations/reset-password/embed-in-page 3) https://supertokens.io/docs/emailpassword/common-customizations/email-verification/embed-in-page To slit the sign in and sign up component into two, is a little bit more complex, but possible. What you want to do is to render the

<SignInAndUp/>

in two pages, then you want to use the react component override feature (https://supertokens.io/docs/emailpassword/advanced-customizations/react-component-override/usage) to override

EmailPasswordSignUp

and

EmailPasswordSignIn

component, and render the original component based on the current website path, otherwise return

null

(hence not displaying the component). This way, you will see the sign in page in one path, and sign up page in another path.

The split of components can be a little tricky. So lmk if you would like me to create a quick demo app for this. I can put it up on our github sometime tomorrow.

Alternatively, you can disable our default UI for certain features and build your own UI there. You can then call the APIs directly. The APIs to call are at https://supertokens.io/docs/fdi

Thank you will spend some time reading the docs again and catch up later

Much appreciated

If at last I succeed I'll try to make a demo and it might be helpful for the rest

awesome 🙂

Hey @User, I've been trying to do what you have explained but no result. I'm using Nextjs with custom _document file that implement

getInitialProps

. Can you please provide any existing demo to follow it up or read it to get the idea clear

Sure! Will do @Bruno Diferente

Much appreciated.

@User just to confirm, you want to see a demo of how to split the sign in / sign up components right? Or other stuff too?

What I want to do exactly is beyond this scope and requires to work with The API it self. which is making new signin and signup pages with MUI and full custom design for inputs ......, - But for simplicity and time I just want to split signin/signup component into two different pages, override the UI to change colors and remove

Already member .....Signin

and any other thing keeping only inputs and buttons. [For design I assume docs content is rich already] - redirect to signin if page is protected and the user is not signed in and make a link to sign up if user is not registered yet

Cool!

I'll spin up a demo app for this.

Thank you I really appreciate it

@User here is the demo app code: https://github.com/supertokens/supertokens-auth-react/blob/sign-in-up-split-demo/examples/with-emailpassword/src/App.js

- It renders the sign in UI on

/signin

and sign up UI on

/signup

(these routes are customisable of course). - It adds a button to the sign in form which will take the user to the sign up form. - If the user is not logged in, they will be redirected to the

/signin

page.

Thanks a lot will check it out

Lmk if you have any questions about it.

Will try to simulate it with Nextjs since it has different config of normal react

Ah yea. This will work on nextjs as well. Since that's react too.

the same set of changes will work there too.

When i tried to follow your steps before i ended up with this error