We have a demo app: https://github.com/supertokens/supertokens-auth-react/tree/master/examples/with-svelte-react-thirdpartyemailpassword

It uses our react SDK to make the UI on the /auth/* route.

As per there is no index.js file or main.js

I just went through this... It works fine but when you need to use it on several pages it gets redundant

Hello how do I use username instead of emails???

And then use it for logging in instead of the email

You forgot the write up??

hey @sheyzi_einstein , so the way you can achieve this is (im assuming you use emailpassword recipe): - Add an extra form field during sign up to take in the username (on frontend and backend): https://supertokens.com/docs/emailpassword/common-customizations/signup-form/adding-fields - Add custom validation logic to username form field to make sure that the username is unique. On the frontend side, you can call an API that returns if the username is unqiue or not, and on the backend side, you can check against the db: https://supertokens.com/docs/emailpassword/common-customizations/signup-form/field-validators

- In the post sign up override, you can save the username in your db against the userID and email: https://supertokens.com/docs/emailpassword/common-customizations/handling-signup-success. - Change the sign in form's label from "Email" to "Username". You can provide a

label

attribute in the formField array with

id: "email"

in

signInFeature

on the frontend. - Override the sign in API on the backend to something like this:

EmailPassword.init({
    override: {
        functions: (oI) => {
            return {
                ...oI,
                signIn: async function (input) {
                    /**
                     * Even though we call it input.email,
                     * it's actually the username of the user since we
                     * have changed the label on the frontend to ask the user
                     * to type in their username
                     */
                    let username = input.email;

                    /**
                     * This is a function that you need to implement.
                     */
                    let email = await fetchEmailBelongingToUsername(username);

                    // Now that we have the actual email, we set the input's email to this
                    // and call the original implementation.
                    input.email = email;
                    return oI.signIn(input);
                }
            }
        }
    }
})

That's all!