Menu

Authentication Integration

Nexty's authentication functionality is based on Better-auth, and the authentication module has integrated a wealth of out-of-the-box features:

  • Login Methods: Google, GitHub, Email Magic Link, Google One Tap
  • Security Enhancement: Cloudflare Turnstile verification
  • Email Service: Welcome email sent to new user registrations
  • User Roles: Provides user/admin roles, built-in AuthGuard route protection
  • User Source Tracking: Records user sources based on URL parameters when users visit links
  • User Blocking: Administrators can easily block risky users to protect system security
  • Last Login Method: Locally records user's last login method for faster login completion

Better-auth Environment Variables

Using Better-auth requires configuring BETTER_AUTH_SECRET, which can be generated using the command:

openssl rand -base64 32

Configure GitHub OAuth

Good to know

If GitHub authentication is not needed, simply remove the login button in components/auth/LoginForm.tsx.

Open GitHub's OAuth Apps page and click New OAuth App to start creating a new OAuth app.

For Development Environment:

  • Fill Homepage URL with development environment address, e.g.: http://localhost:3000
  • Fill Authorization callback URL with specified API endpoint, e.g.: http://localhost:3000/api/auth/callback/github

For Production Environment:

  • Fill Homepage URL with production environment address, e.g.: https://demo.nexty.dev
  • Fill Authorization callback URL with specified API endpoint, e.g.: https://demo.nexty.dev/api/auth/callback/github

Good to know

It's recommended to create separate OAuth apps for development and production environments, so you don't need to modify Homepage URL and Authorization callback URL.

auth github create

After creation, you'll see the Client ID. Click Generate a new client secret to generate the Client Secret, then add them to environment variables NEXT_PUBLIC_GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET.

auth github key

Configure Google OAuth

Good to know

If Google authentication is not needed, simply remove the login button in components/auth/LoginForm.tsx.

Open Google Cloud Console and click New Project.

auth google create

Enter the project name and click Create.

auth google create

Start setting up the Project.

auth google create
auth google create
auth google create
auth google create

Create Client ID.

auth google create
auth google create
  • Select Web application for Application type
auth google create

For Development Environment:

  • Fill Authorized JavaScript origins with development environment address, e.g.: http://localhost:3000 and http://localhost
  • Fill Authorized redirect URIs with specified API endpoint, e.g.: http://localhost:3000/api/auth/callback/google

For Production Environment:

  • Fill Authorized JavaScript origins with production environment address, e.g.: https://demo.nexty.dev
  • Fill Authorized redirect URIs with specified API endpoint, e.g.: https://demo.nexty.dev/api/auth/callback/google
auth google create

Copy the generated Client ID and Client secret to environment variables NEXT_PUBLIC_GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET.

After completing the local environment variable configuration, you can create a production environment Client under the same project.

auth google create

After completing the above environment variable configuration, you can not only use Google authentication but also support Google One Tap login.

Email Magic Link login requires sending an authentication email to users, so it requires the Resend service.

When you complete the Resend Integration steps, Email Magic Link login will be supported.

Configure Turnstile Human Verification

Log in to Cloudflare, open Turnstile in the left menu, and click Add Widget.

add widget

Select the production environment domain and manually enter localhost for local testing.

add hostnames

Select Widget Mode and pre-clearance.

select mode

Widget Mode determines how to identify whether visitors are bots. The three options mean:

  • Managed (Recommended): Intelligently analyzes visitor behavior, trusted users pass directly, suspicious users need to click for verification
  • Non-interactive: Shows loading animation, automatically completes verification in the background, no user action required
  • Invisible: Completely hides the verification process, silently completes all checks in the background

Would you like to opt for pre-clearance for this site? determines whether verified users can skip some verification processes in subsequent visits.

  • Select No: Every visit requires complete verification
  • Select Yes: Provides different levels of verification exemption based on selected mode
turnstile key

After creation, you'll see Site Key and Secret Key. Copy them to environment variables NEXT_PUBLIC_TURNSTILE_SITE_KEY and TURNSTILE_SECRET_KEY respectively.

After configuration, users will trigger Turnstile verification when logging in with email, effectively preventing bot attacks and improving website security.

turnstile demo