architecture

Architecture

High Level hierarchy

.
├── components
│   └── superTokensRoute.tsx // Routing component using `react-router-dom`
├── recipe
│   ├── components
│   │   ├── errorBoundary.tsx // Called by featureWrapper, it is responsible for showing error message in the console and not in the page directly.
│   │   └── featureWrapper.tsx // Component that must wrap all other components in any recipe features. It is responsible for creating the shadow root dom.
│   ├── emailpassword
│   ├── session
│   └── recipeModule.ts // All recipes must extend this class which defines routes.
├── superTokens.tsx
├── index.ts // Functions exposed to the developers (API Wrapper around superTokens.tsx)
└── version.ts

Email Password Recipe

.
├── assets
│   └── error.tsx // Error icon (svg) displayed on the left of error field messages.
│   │
├── components
│   │
│   │  /*
│   │   *  Feature components, it's a bridge between any theme (UI) and the Backend API.
│   │   */
│   │
│   ├── features
│   │   │
│   │   ├── resetPasswordUsingToken
│   │   │   ├── api.ts
│   │   │   │   /*
│   │   │   │    * resetPasswordUsingToken will render its children if any (Custom theme), or the default theme `ResetPasswordUsingTokenTheme`
│   │   │   │    */
│   │   │   └── resetPasswordUsingToken.tsx
│   │   │
│   │   └── signInAndUp
│   │       │
│   │       │   /*
│   │       │    * SignInAndUp will render its children if any (Custom theme), or the default theme `SignInAndUpTheme`
│   │       │    * It is responsible for updating the `email` formField adding an extra call to `verifyEmailExist` (using props or built-in)
│   │       │    */
│   │       │
│   │       ├── SignInAndUp.tsx
│   │       └── api.ts
│   │
│   │
│   │
│   ├── library
│   │   |
│   │   | /*
│   │   |  *  The library is a set of components used by the EmailPassword themes.
│   │   |  *  FormBase.tsx is the most complex component at the moment in terms of user interactions.
│   │   |  *  It take `formFields` as props and is responsible for displaying the appropriate form.
│   │   |  *  It starts by adding a `ref` to all formFields using `createRef` hook.
│   │   |  *  This is useful when dealing with forms input because it will keep track of the updated value without updating the state,
│   │   |  *  in other words,  without unnecessarily reloading the whole React component.
│   │   |  *  FormBase.tsx is responsible for:
│   │   |  *    - validating inputs on blur (If props `validateOnblur=true`)
│   │   |  *    - Displaying form inputs
│   │   |  *    - Displaying form labels  (If props `showLabels=true`)
│   │   |  *    - cleaning error message on focus.
│   │   |  *    - When the form gets submitted.
│   │   |  *       - Validate inputs
│   │   |  *       - calling `callAPI`
│   │   |  *       - call `onSuccess` props when successful, or show general error message otherwise.
│   │   |  *
│   │   |  *  Note that the FormBase is also used by supertokens/supertokens-react-themes
│   │   |  *
│   │   |  */
│   │   ├── FormBase.tsx
│   │   ├── button.tsx
│   │   ├── formRow.tsx
│   │   ├── index.ts
│   │   ├── input.tsx
│   │   ├── inputError.tsx
│   │   └── label.tsx
│   │
│   │
│   ├── styles
│   │   |
│   │   | /*
│   │   |  *  The styleContext is responsible for:
│   │   |  *    - Merging the palette provided by the user with the theme's palette
│   │   |  *    - Merging the styles provided by the user with the theme's styles
│   │   |  *    - Propagating the styles to child components without polluting the props.
│   │   |  * 
│   │   |  *  Note that the StyleContext is also used by supertokens/supertokens-react-themes
│   │   |  * 
│   │   |  *  More details in the style wiki.
│   │   |  */
│   │   |
│   │   └── styleContext.tsx
│   │
│   │
│   └── themes
│       └── default
│           ├── resetPasswordUsingToken
│           │   ├── enterEmail.tsx // Essentially rendering FormBase.tsx with a custom footer, header and callAPI=EnterEmailAPI
│           │   ├── index.tsx // Decides if we should render enterEmail or submitNewPassword (Is token present in URL?).
│           │   └── submitNewPassword.tsx // Essentially rendering FormBase.tsx with a custom footer, header and callAPI=submitNewPasswordAPI
│           ├── signInAndUp
│           │   ├── SignIn.tsx // Essentially rendering FormBase.tsx with a custom footer, header and callAPI=SignInAPI
│           │   ├── SignUp.tsx // Essentially rendering FormBase.tsx with a custom footer, header and callAPI=SignUpAPI
│           │   ├── SignUpFooter.tsx
│           │   └── index.tsx // Decides if we should render SignIn or SignUp based on `defaultToSignUp` config and on the current state.
│           ├── styles
│           │   └── styles.ts // Contains all the styles definition for the default theme
│           ├── ThemeBase.tsx // Responsible for loading the Rubik font.
│           ├── constants.ts
│           └── types.ts
│           
│           
├── constants.ts
│
│   /*
│    *  Extends RecipeModule class.
│    *  Responsible for:
│    *   - Responsible for normalising all the configs given by the user during init.
│    *   - Implementing the front end validation.
│    *   - Implementing the default API calls signInAPI/emailExistsAPI/signUpAPI/enterEmailAPI/submitNewPasswordAPI
│    */
├── emailPassword.ts 
├── index.ts
├── types.ts
├── utils.ts
│
│   /*
│    *  Validators
│    *  Responsible for default email/password validations
│    *  Only file which allows `any` types (See Linter configs)
│    */
└── validators.ts