Client Authentication

Authentication

Simple OAuth authentication for your app, using 3rd party providers like Google, Facebook, Twitter, GitHub, and more.

const auth = useAuthContext()

switch (auth.type) {
	case "signed-in":
		return (
			<LoggedIn
				userId={auth.userId}
				signOut={auth.signOut}
				linkAccount={auth.linkAccount}
				providers={auth.providers}
			/>
		)
	case "creating-account":
		return (
			<CreateAccount
				createAccount={auth.createAccount}
				cancelCreateAccount={auth.cancelCreateAccount}
				providers={auth.providers}
			/>
		)
	case "unauthenticated":
		return (
			<NotLoggedIn
				submitInviteCode={auth.submitInviteCode}
				signIn={auth.signIn}
				providers={auth.providers}
			/>
		)
}

Have an invite code?

auth.type: "unauthenticated"

On their first visit, users can enter an invite code to create an account

Select a provider

auth.type: "creating-account"

With the code, users then select a provider to authenticate with (Google, GitHub, Twitch, etc.)

Authenticate

Users are redirected to the provider's site to authenticate

Done

auth.type: "signed-in"

Once authenticated, users are redirected back to your app

Already have an account?

auth.type: "unauthenticated"

Users can simply click on a provider they have used to sign-in before

Authenticate

Users are redirected to the provider's site to authenticate

Done

auth.type: "signed-in"

Users are automatically signed in

Connect accounts

Already signed in?

auth.type: "signed-in"

Users can click on additional providers to link them to their account

Authenticate

Users are redirected to the provider's site to authenticate

Done

auth.type: "signed-in"

Users are redirected back to your app

See also

Server auth

See the server side documentation for the authentication process

API Client

CSS Modules

On this page

Sign-up Have an invite code?Select a provider Authenticate Done Sign-in Already have an account?Authenticate Done Connect accounts Already signed in?Authenticate Done See also