Skip to main content

auth-fe

Project Structure​

This plugin is based on base-fe and graphql-fe. This has additional capablities to authenticate user.

Overview​

The auth-fe plugin provides the core setup necessary for authentication.

Features​

  • Routes added : "signup", "signin", "forgot-password", "reset-password", "redirectAfterAuth" Routes can be accessed using useAuthNavigationLinks hook.
  • UI components: All the components related to these forms have been added in the components folder.
    • Authenticated and Unauthenticated Scenarios: Manages separate Apollo Client instances based on the presence of an authentication token.
  • WebSocket Support: Includes setup for GraphQL subscriptions using WebSocket links.
  • Signup with email and password: It provides setup for signing up with email and password.
  • Signin with email and password: Users can sign in with email and password.
  • Forget and reset password: Users can reset password if they forget by clicking on the link in the email.

Installation steps​

  1. If this is a client project created using gs-framework, run the command:
npx create-gs-project@latest add auth-fe

Post Installation steps​

  1. yarn install or npm install
  2. Create a .env.development file with all the variables present in the .env.example file or run cp .env.example .env.development.
  3. Run npm run codegen to generate hooks for the queries and mutations.
  4. To run the project in ios prebuild environment: npm run ios
  5. To run the project in android prebuild environment: npm run android
  6. To run the project in web prebuild environment: npm run web.
  7. To run the project in expo go: npm start and then select the device. This is just a sandbox, some features might not work in this environment.

Backend Dependency​

This plugin depends on any auth-be plugin. Please read the guidelines on how to run that in the backend-plugins.

Structure​

auth-fe/
|-- app/
|   |-- (auth) // all the authentication routes
|   |-- assets
|   |   |-- images // all the auth related images added
|   |-- components
|   |-- context
|   |   |--  auth // SessionProvider file is present here
|-- graphql
|   |-- auth
|   |   |-- queries
|   |   |   |-- user.graphql
|   |   |-- mutations
|   |   |   |-- user.graphql
|-- hooks
|   |-- auth
|   |   |-- useAuthentication.ts
|   |   |-- useAuthNavigationLinks.ts
|   |   |-- useSession.ts
|-- utils
|   |   |-- checkTokenExpiry.ts
|-- services
|   |-- zod-validators
|-- types
|   |-- auth
|   |   |-- sessionTypes.ts

Context:

  1. SessionProvider: wrapped the root of the project in SessionProvider and used useSession hook inside that to fetch user and token, and then passed that token in ApolloProvider.

Hooks:

  1. useAuthentication hook exports methods like loginUsingEmailAndPassword, signUpUsingEmailAndPassword, signOut, initiatePasswordReset, getUserById, completePasswordReset to do all the authentication related actions. It also exports authLoading and authError to set errors with can be used in screens.
  2. useSession hook gives you session and status of the user.
  3. useAuthNavigationLinks gives you all the routes.

Graphql:

  1. All the information related graphql can be found in graphql-fe

Functionalities​

  • Default Functionalities:

    1. It gives the all the authentication UI screens, with all the api calls.

  • Customizable Functionalities:

    1. You can change the theme of the gluestack.
    2. You can customize how the screens look like in the tsx files.
    3. You can change and extend the functionalities in the specific folders, utility folders etc. Keep in mind to make it generic.

Demo​