Skip to main content

Authentication

Authentication in Composable UI is built with the NextAuth.js library. NextAuth provides a framework to enable multiple different types of authentication flows like email sign-in, password sign-in, and OAuth sign-in to providers like Google, Apple, and many other OAuth providers. Refer to the NextAuth Providers documentation for more information.

Composable UI uses secure encrypted JSON Web Tokens (JWTs) to manage user sessions. The JWTs are stored in a Cookie on the browser, and are encrypted automatically by NextAuth using your NEXTAUTH_SECRET environment variable. We recommend learning more about the security, advantages, and disadvantages of Json Web Tokens by referring to the NextAuth JSON Web Tokens FAQ.

OAuth Providers​

Composable UI supports using any third party OAuth provider for authentication.

You can use the NextAuth built-in providers, or buid your own custom OAuth provider.

The Composable UI NextAuth configuration in composable-ui/src/pages/api/auth/[...nextauth].ts is ready to be setup with the Google OAuth provider. To enable Google sign-in, follow the NextAuth Google Provider documentation including Google's guide on generating your own Google API keys. Add your API keys the the GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET variables in /composable-ui/.env (and in Netlify or Vercel if you have deployed your application to one of these platforms). For more information about setting up environment variables, see the Application Configurations section.

NextAuth Configuration​

Composable UI's NextAuth configuration is setup in two files:

  • /composable-ui/src/pages/api/auth/[...nextauth].ts: Contains the dynamic route handler for NextAuth.js, with all of the global configurations and registered providers.
  • /composable-ui/.env: Contains the environment variable NEXTAUTH_SECRET for JWT encryption when signing in.