Which UI do you use?
Custom UI
Pre built UI
Setting default country for phone inputs
How do you want to identify your users?
Only phone numberOnly emailEmail or phone number
By default, there is no default country selected. This means that users will have to select / type in their phone number internation code when signing in / signing up.
If you would like to set a default country (for all users), then you should use the defaultCountry
config:
- ReactJS
- Angular
- Vue
// this goes in the auth route config of your frontend app (once the pre built UI script has been loaded)
(window as any).supertokensUIInit("supertokensui", {
appInfo: {
apiDomain: "...",
appName: "...",
websiteDomain: "..."
},
recipeList: [
(window as any).supertokensUIPasswordless.init({
contactMethod: "PHONE",
signInUpFeature: {
/*
* Must be a two-letter ISO country code (e.g.: "US")
*/
defaultCountry: "HU",
}
}),
(window as any).supertokensUISession.init({ /* ... */ })
]
});
import SuperTokens from "supertokens-auth-react";
import Passwordless from "supertokens-auth-react/recipe/passwordless";
import Session from "supertokens-auth-react/recipe/session";
SuperTokens.init({
appInfo: {
apiDomain: "...",
appName: "...",
websiteDomain: "..."
},
recipeList: [
Passwordless.init({
contactMethod: "PHONE",
signInUpFeature: {
/*
* Must be a two-letter ISO country code (e.g.: "US")
*/
defaultCountry: "HU",
}
}),
Session.init({ /* ... */ })
]
});
// this goes in the auth route config of your frontend app (once the pre built UI script has been loaded)
(window as any).supertokensUIInit("supertokensui", {
appInfo: {
apiDomain: "...",
appName: "...",
websiteDomain: "..."
},
recipeList: [
(window as any).supertokensUIPasswordless.init({
contactMethod: "PHONE",
signInUpFeature: {
/*
* Must be a two-letter ISO country code (e.g.: "US")
*/
defaultCountry: "HU",
}
}),
(window as any).supertokensUISession.init({ /* ... */ })
]
});