Introducing OAuth integration!

[pilcrowonpaper]

Hi!

We're just shy of 400 Github stars and I'm pleasantly surprised with how fast this project is growing. Thank you!

Today, I'm happy to introduce OAuth integration for Lucia! OAuth has been one of those thing that isn't critical enough for it to be part of the core library, but is still very important and kinda unnecessarily annoying. The great thing about Lucia is how simple and extendable it is, and I think the OAuth integration shows that. You start with something simple and flexible, and you optionally add features on top of it.

So how does it work? Using Github OAuth as an example, you first import the Github provider:

import github from "@lucia-auth/oauth/github";

const githubAuth = github(auth, {
	clientId: GITHUB_CLIENT_ID,
	clientSecret: GITHUB_CLIENT_SECRET,
});

You can get the authorization url with getAuthorizationUrl(). This is the url you want to redirect the user to when they click "Sign in with Github." This will also create state, which should be stored in a httpOnly cookie and is used to verify the callback.

const [url, state] = githubAuth.getAuthorizationUrl();
setCookie(state);

After signing in, Github will redirect the user back to your site. To handle the callback, get the code and state from the search params. Make sure the state matches the one stored in the cookie and use validateCallback(). This will validate the code for you and return both the Github user and, if it exists, the corresponding user in your database. If it doesn't exists, you can create the user using createUser() method.

const code = request.url.searchParams.get("code") || "";
const state =  request.url.searchParams.get("state") || "";
const storedState = cookies.get("state");
if (state !== storedState) throw new Error();

const { existingUser, createUser, providerUser } = await githubAuth.validateCallback(code);
const user =
	existingUser ||
	(await createUser({
		username: providerUser.login
	}));
const session = await auth.createSession(user.userId);

We currently only provide Github and Google, but I'm happy to add more.

To start using it, install the package:

npm i @lucia-auth/oauth
pnpm add @lucia-auth/oauth
yarn add @lucia-auth/oauth

Documentation is here: https://lucia-auth.vercel.app/oauth/start-here/getting-started

[demetrius-mp]

wouldnt be better to import the environment variables from $env/static/private?

i remember reading something about these import.meta.env getting exposed to the client

[pilcrowonpaper]

@demetrius-mp I think it's fine if you don't use Import.meta.env in the client. The example code was copy-pasted from an Astro project though so I'll make it more generic.

[ciscoheat]

This looks great, is a Facebook provider in the pipeline, or something that you want to be contributed?

[pilcrowonpaper]

Not in the pipeline right now so it'll likely be added via contributions, though I'm happy to help with the implementation.

[ciscoheat]

Ok, I'm happy to make an attempt! Can you point me in a good starting direction code-wise? What do you need to help with the implementation?

[pilcrowonpaper]

I think GitHub or Google OAuth module is a good starting point. The auth flow of OAuth is pretty much identical between providers, just need to change the api url and params.