Google Authentication with Next.js

Supporting social login is a great way to reduce the friction of signup, and Nile makes it easy to add social providers to your application. This guide walks you through setting up Google as an identity provider.

Sign up for an invite to Nile if you don't have one already and follow the prompts to create a workspace and database. You'll also need a Google account and a Google Cloud project for your application.

Connect Your Google and Nile Accounts

To ensure a secure exchange, your Google project and Nile database need to know a little bit about each other.

1. Enable Google in Nile.

1. Open the Nile Console, and select the database for your application.
2. Click on the Identity Providers icon in the side navigation.
3. Click on the Google tile and flip the Enabled toggle on.
4. The client id and secret are values you'll obtain from Google. Leave these blank for now.
5. The Redirect URI is the page in your application that Nile redirects to after a user authenticates, or when an error occurs. For this example, enter http://localhost:3000/api/auth/handler.
6. Under Callback URI, click the Copy button to copy your database's callback URI to your clipboard. You'll need this when you configure Google. (The Component URL isn't necessary for this example; it's used for configuring the Nile UI component.)

2. Configure Google.

1. Login to your Google Cloud console and open the credentials panel for your Google Cloud project.
2. Click Create Credentials > OAuth client ID.
3. In the Application type dropdown, select Web Application and give it a name, like "Nile Integration".
4. Under Authorized redirect URIs, past the Callback URI that you copied above.
5. Click Create. Google displays the client id and client secret. (The client id is the longer of the two, and will look something like 012345678901-e234mkac1qefclfum27kktf4c0jbnfuc.apps.googleusercontent.com. The client secret is the shorter string and will look something like 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.) Copy the generated values—you'll provide them to Nile.

3. Provide client credentials to Nile.

1. Back in the Nile dashboard, enter the client id and secret that you obtained from Google.
2. Click Save.

With your Google and Nile accounts connected, your application can now authenticate users with Google accounts.

Test Authentication

1. Clone the example application.

git clone https://github.com/niledatabase/niledatabase.git
cp -r niledatabase/examples/user_management/social_login_google/NextJS ./nile-google-nextjs
cd nile-google-nextjs

and install dependencies with yarn install or npm install.

2. Configure your application.

For database access, configure the Nile SDK with the necessary credentials:

• Rename .env.local.example to .env.local in the project's root directory and open it.
• Enter your database credentials (NILEDB_USER and NILEDB_PASSWORD). Use existing credentials, or generate new ones through the Nile Console:

1. Visit the Nile Console, select your database, and navigate to Settings > Credentials.
2. Click Generate credentials, then Generate and Copy credentials to clipboard.
3. The copied credentials include two UUIDs: the first is the username and the second is the password, separated by a colon (":"). Paste the username into the NILEDB_USER value in .env.local, and the password into the NILEDB_PASSWORD value.

These credentials authenticate your app with the Nile API.

• In the same .env.local file, enter the NEXT_PUBLIC_NILEDB_API_URL. You can find this in the Nile Console under Settings > General.

3. Run, sign up and query users.

Run the app with yarn dev or npm dev to start the app, and open http://localhost:3000/ in your browser. When you click "Continue with Google", you'll be redirected to Google's authentication screen. After successfully logging in, you'll be redirected back to the demo application's route handler.

Note: some browsers will present a security warning when redirecting from Nile to the local demo application because of the switch from HTTPS to HTTP. This is expected behavior for this demo. You should, of course, run your production application over HTTPS.

You can verify that your user was created in the Nile Console. Open the SQL editor for your database and query the users table:

SELECT * FROM users.users;

Dig Deeper

The GoogleLoginButton

In /app/page.tsx, you'll find a <GoogleAuthPanel> which wraps a <GoogleLoginButton> component from the Nile UI Kit. This component initiates an authentication request to your Nile database, which redirects to the Google authentication screen.

export default function GoogleAuthPanel() {
  ...
  return (
    <NileProvider apiUrl={String(process.env.NILEDB_API_URL)}>
      <GoogleSSOButton />
    </NileProvider>
  );
}

The Auth Redirect Handler

When the user successfully authenticates with Google, they are redirected to the URL you provided in your Nile configuration. In this example, that's /api/auth/handler/route.ts, which checks for errors and redirects to the /dashboard page on success. The dashboard displays the values that Nile sends you when an authentication attempt is resolved.

export async function POST(req: Request) {
  const formData = await req.formData();
  const event = formData.get("event");

  let location: string;

  if (event === "AUTH_ERROR") {
    const message = formData.get("error");
    location = redirectOnError(message ? message.toString() : "Unknown error");
  } else {
    location = redirectOnSuccess(formData);
  }

  return new Response(null, {
    headers: { Location: location },
    status: 302,
  });
}

Summary

Nile uses the standard OpenID Connect protocol to authenticate users with Google, then creates corresponding users in your database. Your application will receive information about the user and a Nile access token associated with the user—see Handling Auth Redirects for more on that.

Nile supports other authentication methods, like SSO with Okta. Or if you want to dig deeper into querying user data, read Querying as a User.