Using an authentication provider with Wabe#

Wabe simplifies user authentication by providing pre-built connection providers such as EmailPassword, Google, and more. These providers are ready to use without requiring additional configuration in your backend.

This guide explains how to use these providers and integrate them into your application.

Default GraphQL mutations for authentication#

Wabe provides three default GraphQL mutations for authentication:

1. signInWith Mutation: Used to authenticate users with the specified provider.
2. signUpWith Mutation: Used to register users with the specified provider. 3 signOut Mutation: Used to sign out the user.

Example#

For a complete usage examples, refer to the components/molecules/SignInForm/index.tsx file, where the signInWith mutation is implemented for multiple providers.

Here is an example of signInWith and signUpWith mutations:

mutation signInWithEmailPassword($email: Email!, $password: String!) {
  signInWith(
    input: {authentication: {emailPassword: {email: $email, password: $password}}}
  ) {
    id
    accessToken
  }
}

mutation signUpWithEmailPassword($email: Email!, $password: String!) {
  signUpWith(
    input: {authentication: {emailPassword: {email: $email, password: $password}}}
  ) {
    id
    accessToken
  }
}

mutation signOut {
  signOut
}

Using Google authentication#

For OAuth-based providers like Google, Wabe simplifies the process further. You don’t need to manage OAuth logic yourself.

Steps to enable Google sign-in#

1. Redirect Users to the OAuth Route:

   • Redirect users to the pre-implemented route provided by Wabe: http://localhost:3003/auth/oauth?provider=google
   • A complete example are present in components/atoms/SignInWithGoogle/index.tsx

2. Set Up Authentication Keys:

   • Add your Google authentication keys in Wabe's authentication configuration object. These keys are used to securely connect with Google's authentication services.

const wabeApp = new Wabe<BackTypes>({
  authentication: {
    session: {
      // We recommend to use cookies for authentication, but can use classic usage with header token
      cookieSession: true,
      accessTokenExpiresInMs: 1000 * 60 * 15, // 15 minutes
      refreshTokenExpiresInMs: 1000 * 60 * 60 * 24 * 7, // 7 days
    },
    providers: {
      google: {
        clientId: 'YOUR_CLIENT_ID',
        clientSecret: 'YOUR_CLIENT_SECRET',
      },
    },
    successRedirectPath: 'http://127.0.0.1:3000/dashboard',
    failureRedirectPath: 'http://127.0.0.1:3000/signin',
    roles: ['Admin', 'Client'],
  }
})

Key benefits of wabe's authentication providers#

• Ease of Use: Pre-configured and ready-to-use providers save development time.
• Flexibility: Supports various authentication methods, allowing you to customize based on user preferences.
• Secure: Authentication keys and routes are managed securely within Wabe.

For further details, explore the Wabe documentation: Wabe Authentication Guide.

Create your own authentication provider#

Wabe provides a flexible and extensible authentication system that allows you to create your own authentication providers. You can use the Wabe authentication system to integrate with any authentication provider, such as Google, Facebook, or Twitter.

You can check the Wabe documentation for more details: Wabe custom authentication guide.

Roles#

You can create custom roles in ShipMySaaS in the file src/server.ts in the authentication object. The roles property is an array of strings that define the roles available for users.

const wabeApp = new Wabe<BackTypes>({
    // Other configurations ...
    authentication: {
      session: {
        cookieSession: true,
        accessTokenExpiresInMs: 1000 * 60 * 15, // 15 minutes
        refreshTokenExpiresInMs: 1000 * 60 * 60 * 24 * 7, // 7 days
      },
      successRedirectPath: 'http://127.0.0.1:3000/dashboard',
      failureRedirectPath: 'http://127.0.0.1:3000/signin',
      roles: ['Admin', 'Client'], // Here
    },
  })