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
}

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. Setup Google settings:

   • Go to Google Cloud Console in API and Services -> Oauth Consent Screen.
   • Add the following domains to the list of Authorized domains (change for your own):
     • https://app.shipmysaas.com
     • http://127.0.0.1:3000
   • Add the following redirection URIs (change for your own):
     • http://127.0.0.1:3000/auth/oauth/callback
     • https://app.shipmysaas.com/auth/oauth/callback

2. 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

3. 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: {
    providers: {
      google: {
        clientId: 'YOUR_CLIENT_ID', // process.env.GOOGLE_CLIENT_ID,
        clientSecret: 'YOUR_CLIENT_SECRET', // process.env.GOOGLE_CLIENT_SECRET,
      },
    },
    successRedirectPath: `http${process.env.NODE_ENV === 'production' ? 's' : ''}://${process.env.FRONT_DOMAIN || 'localhost:3000'}/dashboard`, // process.env.
    failureRedirectPath: `http${process.env.NODE_ENV === 'production' ? 's' : ''}://${process.env.FRONT_DOMAIN || 'localhost:3000'}/signin`,
    roles: ['Admin', 'Client'],
  }
})

GitHub Authentication#

For OAuth-based providers like GitHub, Wabe simplifies the process, eliminating the need to handle OAuth flows manually.

Steps to Enable GitHub Sign-in#

1. Create a GitHub OAuth Application:

   • Go to GitHub Developer Settings -> Integrations -> Applications -> My GitHub apps -> New GitHub App.
   • Set the following values (adjust for your own environment):
     • Homepage URL: https://app.shipmysaas.com (or your domain)
     • Authorization callback URL:
       • http://127.0.0.1:3000/auth/oauth/callback
       • https://api.shipmysaas.com/auth/oauth/callback
   • After creating the application, note the Client ID and Client Secret.

2. Configure Account Permissions:

   • In your GitHub OAuth App settings, go to Account Permissions.
   • Under Email Addresses, grant read-only access to retrieve users' email addresses.

3. Redirect Users to the OAuth Route:

   • Direct users to Wabe’s built-in GitHub OAuth route:
     http://127.0.0.1:3003/auth/oauth?provider=github
   • A complete implementation example can be found in components/atoms/SignInWithGitHub/index.tsx.

4. Set Up Authentication Keys:

   • Add your GitHub authentication credentials to Wabe’s authentication configuration object:
   server.ts

   const wabeApp = new Wabe<BackTypes>({
     authentication: {
       providers: {
         github: {
           clientId: 'YOUR_CLIENT_ID', // process.env.GITHUB_CLIENT_ID,
           clientSecret: 'YOUR_CLIENT_SECRET', // process.env.GITHUB_CLIENT_SECRET,
         },
       },
       successRedirectPath: `http${process.env.NODE_ENV === 'production' ? 's' : ''}://${process.env.FRONT_DOMAIN || 'localhost:3000'}/dashboard`,
       failureRedirectPath: `http${process.env.NODE_ENV === 'production' ? 's' : ''}://${process.env.FRONT_DOMAIN || 'localhost: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
    },
  })