603466164219281420 #support-questions

The benefit of upgrading is that you would get social login as a feature if you want that. But if you don’t, I don’t see any need for you to upgrade it

user

02/18/2021, 9:48 AM

Yeah I would prefer to have social login features

02/18/2021, 9:49 AM

Do you want social login and email password? Or just social login?

user

02/18/2021, 9:49 AM

What's the difference?

user

02/18/2021, 9:49 AM

I upgraded both

supertokens-node

and

supertokens-auth-react

to the latest versions

user

02/18/2021, 9:49 AM

I haven't touched email verification myself but plan to

user

02/18/2021, 9:50 AM

Is it included by default in the boilerplate code or is it something separate I need to add code to implement

02/18/2021, 9:50 AM

I mean do you want to show your users the ability to do social login or to create their own email password with you?

user

02/18/2021, 9:50 AM

I want them to be able to sign up/sign in with either social login or with a regular email and password

02/18/2021, 9:51 AM

Got it. So wait for a week or so. We will launch that very soon with email verification etc.. then can take you through migration.

user

02/18/2021, 9:55 AM

Awesome thanks Rishabh. You're the best

02/18/2021, 9:55 AM

Appreciate it!

user

02/18/2021, 10:02 AM

Any way to quickly remove these shadows on these inputs?

user

02/18/2021, 10:02 AM

+ the extra styling such as the checkmark and eye for viewing hiding

02/18/2021, 10:04 AM

@kevin.a can help

kevin.a

02/18/2021, 10:05 AM

Hey @User , let me take a look and I'll give you more info soon

user

02/18/2021, 10:07 AM

Yeah it seems like these styles might have been added since the last time I used supertokens. I just upgraded my supertokens packages and noticed them

kevin.a

02/18/2021, 10:11 AM

Can I see your

SuperTokens.init

, I think you have customized styles already ? @User

user

02/18/2021, 10:13 AM

Copy code

ts
const STYLE_OVERRIDES: Record<string, CSSObject> = {
  container: {
    borderRadius: '0',
    margin: '0',
    boxSizing: 'border-box',
    boxShadow: '0px 2px 32px rgba(0, 0, 0, 0.05)',
    fontFamily: 'Nunito Sans',
    padding: '0px 48px',
  },
  row: {
    width: '100%',
    headerTitle: {
      letterSpacing: 'default',
    },
    secondaryText: {
      letterSpacing: 'default',
    },
  },
  input: {
    boxSizing: 'border-box',
    height: '48px',
    width: '100%',
    margin: '0',
    transition: 'all 0.07s ease-out',
    borderRadius: '0',
    border: '2px solid transparent',
    fontFamily: 'Nunito Sans',
    font: '400 16px Nunito Sans',
    letterSpacing: 'default',
    boxShadow: '0px 2px 10px rgba(0, 0, 0, 0.1)',
    fontSize: '16px',
    ':hover': {
      border: '2px solid #8E959E',
    },
    ':focus': {
      border: '2px solid #1D2126',
    },
  },
  button: {
    boxSizing: 'border-box',
    height: '48px',
    boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.15)',
    borderRadius: '0',
    fontFamily: 'Nunito Sans',
    transition: 'all 0.12s ease-out',
    fontSize: '16px',
    padding: 'none',
    ':hover': {
      transform: 'translateY(-4px)',
    },
  },
};
export default {
  appInfo: {
    appName: 'codusk-app',
    apiDomain: apiUrl,
    websiteDomain: websiteUrl,
    apiBasePath: 'api/auth',
  },
  recipeList: [
    // eslint-disable-next-line
    // @ts-ignore
    EmailPassword.init({
      palette: {
        primary: '#0A2B4C',
        inputBackground: '#fff',
        textLink: '#5986B2',
      },
      signInAndUpFeature: {
        onSuccessRedirectURL: 'feed',
        signUpForm: {
          style: STYLE_OVERRIDES,
        },
        signInForm: {
          style: STYLE_OVERRIDES,
        },
      },
      resetPasswordUsingTokenFeature: {
        submitNewPasswordForm: {
          style: STYLE_OVERRIDES,
        },
        enterEmailForm: {
          style: STYLE_OVERRIDES,
        },
      },
    }),
    Session.init()
  ],
};

user

02/18/2021, 10:13 AM

Then I pass this into my

Supertokens.init()

kevin.a

02/18/2021, 10:17 AM

Try this and let me know if that's what you expected.

Copy code

const STYLE_OVERRIDES: Record<string, CSSObject> = {
  container: {
    borderRadius: '0',
    margin: '0',
    boxSizing: 'border-box',
    boxShadow: '0px 2px 32px rgba(0, 0, 0, 0.05)',
    fontFamily: 'Nunito Sans',
    padding: '0px 48px',
  },
  row: {
    width: '100%',
    headerTitle: {
      letterSpacing: 'default',
    },
    secondaryText: {
      letterSpacing: 'default',
    },
  },
  inputAdornment: {
    display: "none"
  },
  inputWrapper: {
    boxSizing: 'border-box',
    height: '48px',
    width: '100%',
    margin: '0',
    transition: 'all 0.07s ease-out',
    borderRadius: '0',
    border: '2px solid transparent',
    fontFamily: 'Nunito Sans',
    font: '400 16px Nunito Sans',
    letterSpacing: 'default',
    boxShadow: '0px 2px 10px rgba(0, 0, 0, 0.1)',
    fontSize: '16px',
    "&:focus-within": {
      border: '2px solid #8E959E',
      boxShadow: "none"
    },
    ':hover': {
      boxShadow: "none"
    },
    ':focus': {
      border: '2px solid #1D2126',
      boxShadow: "none"
    },
  },
  inputError: {
    boxShadow: "none",
    outline: "none",
    "&:focus-within": {
        boxShadow: "none",
        outline: "none"
    }
  },
  button: {
    boxSizing: 'border-box',
    height: '48px',
    boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.15)',
    borderRadius: '0',
    fontFamily: 'Nunito Sans',
    transition: 'all 0.12s ease-out',
    fontSize: '16px',
    padding: 'none',
    ':hover': {
      transform: 'translateY(-4px)',
    },
  },
};

kevin.a

02/18/2021, 10:20 AM

you might also want to replace:

Copy code

EmailPassword.init({
  signInAndUpFeature:{
    onSuccessRedirectURL: 'feed',
    (...)
  }
}

with:

Copy code

EmailPassword.init({
   async getRedirectionURL(context) {
      if (context.action === "SUCCESS") {
        return "feed";
      }
    },
    signInAndUpFeature: {
      (...)
    }

kevin.a

02/18/2021, 10:20 AM

@User ^

user

02/18/2021, 10:45 AM

Thanks I’ll get this tomorrow. Appreciate it