DevVault

Learn How to Integrate Convex Auth in your Application

Important

If you haven't gone through the installation process yet, get that done, and then come back when you're ready to continue.

Step 1

Paste the following command to initialize Convex Auth.

npx @convex-dev/auth

# You'll be prompted about the URL: (Hit Enter)
> Enter the URL of your local web server (e.g. http://localhost:1234) (http://localhost:3000)

Great Job! The next step is to add Google OAuth to your application.

Learn How to Create Google OAuth Credentials

Important

Don't skip the step above, get that done, and then come back here when you're ready to continue.

Head over to this link to get startedGoogle Cloud Console

Step 2

OAuth Consent Screen Setup

Select the OAuth Consent Screen on the sidebar.
Under the User Type selection choose External
Write the name of the project in the [App Name] field
Add your email in the [User support email] field
(Optional) You can also add your logo.
Grab your Convex URL in your .env file then copy and paste it in the Authorized Domains:

# It will be under NEXT_PUBLIC_CONVEX_URL
# Replace .cloud to .site
# Here's what the end result looks like
name-name-123.convex.site

Add your email again in the [Developer contact information] field
Just keep clicking on the Save and Continue button until you get the last step.

Step 3

Credentials Setup

Select the Credentials on the sidebar.
Click the Create Credentials on the top.
Select the OAuth client ID option.
Select the Web application option for the application type.
(Optional) You can rename the name of your OAuth client or leave it like that.
Copy and paste this in the [Authorized JavaScript Origins], we're going to change this later once we deployed it to production with your own domain:

http://localhost:3000

Grab the same Convex URL in your .env file and paste it in [Authorized Redirect URLS], we're going to change this also later once we deployed our backend to production:

# It will look like this
# append the last part of your Convex URL after the .site
https://name-name-123.convex.site/api/auth/callback/google

Hit the Create button.

You're almost there! The last step is to add Github OAuth to your application.

Learn How to Create Github OAuth Credentials

Important

Don't skip the steps above, get that done, and then come back here when you're ready to continue.

Head over to this link to get startedGithub Developer Settings

Step 1

Github OAuth App

Select the OAuth Apps on the sidebar.
Click the New OAuth App on the top.
Enter your project name under [Application Name]
Copy and paste this in the [Homepage URL], we're going to change this later once we deployed it to production with your own domain:

http://localhost:3000

(Optional) You can add your application description.
Copy the same you did from step 2 and paste it in [Authorized callback URLS], we're going to change this also later once we deployed our backend to production:

# It will look like this
# Just change the /google to /github
https://name-name-123.convex.site/api/auth/callback/github

Hit the Register Application button.

You're set! You can now both use Google and Github OAuth to authenticate your users. See you on the next one!

Next Steps

Learn about how to setup Stripe in your project.

Stripe Setup

Instructions for setting up Stripe API Keys to handle secure payments.

For more detailed information on Convex Auth, visit the official documentation:Convex Auth Documentation

Authentication Setup

Learn How to Integrate Convex Auth in your Application

Important

Learn How to Create Google OAuth Credentials

Important

Learn How to Create Github OAuth Credentials

Important

Next Steps

Stripe Setup