Which frontend SDK do you use?

supertokens-web-js / mobile

supertokens-auth-react

About RecipeModule and AuthRecipeModule

RecipeModule is the abstract base class that all recipes (their recipe.ts file) must implement, and AuthRecipeModule is the abstract class the extends RecipeModule and all auth recipes must implement.

An auth recipe is a recipe that has user sign up / sign in (they create their own user). So emailpassword is an auth recipe, whereas session is not an auth recipe. So emailpassword extends AuthRecipeModule and session directly extends RecipeModule.

What does RecipeModule do

• All recipes might need to redirect users based on some context object. So we have a function getDefaultRedirectionURL that a child recipe class can implement to take care of redirection.
• The base class also contains some common helper method related to redirecting a user.
• A recipe may have a feature in which case get can implement the getFeatures and getFeatureComponent functions. A feature is a part of a recipe that has it's own UI and is displayed based on some rule.
• This class also holds some config values that are common for all recipes. The config contains:
  • recipeId
  • appInfo (containing the appName, websiteDomain, apiDomain..): These can be used by the recipe's logic as and when needed.
  • User hook functions: getRedirectionURL, preAPIHook and onHandleEvent.
  • useShadowDom: If this recipe should use the shadow dom or not.
  • palette: For colour styling.
• Finally, since all recipes extend this class, we can use this class as a type in the user's config input for recipeList.

What does AuthRecipeModule do

• It adds the email verification recipe to this recipe - since all auth recipes (as of this writing) have an email and the user should be able to verify the email.
• Provides some common helper functions for the recipe's logic to use:
  • signOut
  • doesSessionExist
  • redirection to auth screen
• Handles redirection to the sign up / in screen and to post sign in / up screen.