Authentication

Combined with the capabilities of supabase, we have integrated 3 types of authentication:

Password: Users can sign up and log in using their email and password.
Magic Link: Users can sign up and log in using a magic link sent to their email.
oAuth: Users can sign up and log in using their Google account, Github account and others.

Configuration

Open the apps/web/config/auth.config.ts file and modify the auth object to enable the desired authentication methods.

apps/web/config/auth.config.ts

{
  password: process.env.NEXT_PUBLIC_AUTH_PASSWORD, // Enable password authentication, default is true
  magicLink: process.env.NEXT_PUBLIC_AUTH_MAGIC_LINK, // Enable magic link authentication, default is false
  oAuth: ['google', 'github'], // Enable oAuth authentication
}

Third-party Authentication

You need to complete the configuration of the third-party provider in Supabase, and then fill in the configured third-party name in providers.

apps/web/config/auth.config.ts

{
  providers: ['google', 'github'], // Enable third-party authentication
}

Supabase offers these providers options:

apps/web/config/auth.config.ts

[
  'apple',
  'azure',
  'bitbucket',
  'discord',
  'facebook',
  'figma',
  'github',
  'gitlab',
  'google',
  'kakao',
  'keycloak',
  'linkedin',
  'linkedin_oidc',
  'notion',
  'slack',
  'spotify',
  'twitch',
  'twitter',
  'workos',
  'zoom',
  'fly',
]

--------------------------------------------------

prividers:{
   oAuth: ['google', 'github']
}

Roles and Permissions

You can set roles and permissions for your team members to control each member's access rights.

We have 2 built-in roles, and several permissions as follows:

owner: The owner has full access to the project and can manage all settings. roles.manage billing.manage settings.manage members.manage invites.manage
member: The member has limited access. members.manage, invites.manage

Check the user's role and permissions (Only for team accounts)

We have provided a function to check the user's role and permissions in the apps/web/utils/auth.ts file.

  async hasPermission(params: {
    accountId: string;
    userId: string;
    permission: Database['public']['Enums']['app_permissions'];
  }) {
    const { data, error } = await this.client.rpc('has_permission', {
      account_id: params.accountId,
      user_id: params.userId,
      permission_name: params.permission,
    });

    if (error) {
      throw error;
    }

    return data;
  }

You can add permissions to a component in the following way

Demo component.tsx

import { loadTeamWorkspace } from '~/home/[account]/_lib/server/team-account-workspace.loader';
 
export function Component() {
  const data = await loadTeamWorkspace();
  const permissions = data.account.permissions; 
 
  const canDelete = permissions.includes('component.delete'); // Check if the user has permission to delete a component
 
  return (
    <div>
      {canDelete && <button>Delete</button>}
    </div>
  );
}