web/versioned_docs/version-0.12/auth/social-auth/github.md
import useBaseUrl from '@docusaurus/useBaseUrl'; import DefaultBehaviour from './_default-behaviour.md'; import OverrideIntro from './_override-intro.md'; import OverrideExampleIntro from './_override-example-intro.md'; import UsingAuthNote from './_using-auth-note.md'; import WaspFileStructureNote from './_wasp-file-structure-note.md'; import GetUserFieldsType from './_getuserfields-type.md'; import ApiReferenceIntro from './_api-reference-intro.md'; import UserSignupFieldsExplainer from '../_user-signup-fields-explainer.md';
Wasp supports Github Authentication out of the box. GitHub is a great external auth choice when you're building apps for developers, as most of them already have a GitHub account.
Letting your users log in using their GitHub accounts turns the signup process into a breeze.
Let's walk through enabling Github Authentication, explain some of the default settings, and show how to override them.
Enabling GitHub Authentication comes down to a series of steps:
User entity.Let's start by properly configuring the Auth object:
<Tabs groupId="js-ts"> <TabItem value="js" label="JavaScript"> ```wasp title="main.wasp" app myApp { wasp: { version: "^0.11.0" }, title: "My App", auth: { // highlight-next-line // 1. Specify the User entity (we'll define it next) // highlight-next-line userEntity: User, methods: { // highlight-next-line // 2. Enable Github Auth // highlight-next-line gitHub: {} }, onAuthFailedRedirectTo: "/login" }, } ``` </TabItem> <TabItem value="ts" label="TypeScript"> ```wasp title="main.wasp" app myApp { wasp: { version: "^0.11.0" }, title: "My App", auth: { // highlight-next-line // 1. Specify the User entity (we'll define it next) // highlight-next-line userEntity: User, methods: { // highlight-next-line // 2. Enable Github Auth // highlight-next-line gitHub: {} }, onAuthFailedRedirectTo: "/login" }, } ``` </TabItem> </Tabs>Let's now define the app.auth.userEntity entity:
To use GitHub as an authentication method, you'll first need to create a GitHub OAuth App and provide Wasp with your client key and secret. Here's how you do it:
http://localhost:3000/auth/login/github.https://someotherhost.com/auth/login/github.Add these environment variables to the .env.server file at the root of your project (take their values from the previous step):
GITHUB_CLIENT_ID=your-github-client-id
GITHUB_CLIENT_SECRET=your-github-client-secret
Let's define the necessary authentication Routes and Pages.
Add the following code to your main.wasp file:
// 6. Define the routes
route LoginRoute { path: "/login", to: LoginPage }
page LoginPage {
component: import { Login } from "@src/pages/auth.jsx"
}
```
// 6. Define the routes
route LoginRoute { path: "/login", to: LoginPage }
page LoginPage {
component: import { Login } from "@src/pages/auth.tsx"
}
```
We'll define the React components for these pages in the src/pages/auth.{jsx,tsx} file below.
:::info We are using Tailwind CSS to style the pages. Read more about how to add it here. :::
Let's create a auth.{jsx,tsx} file in the src/pages folder and add the following to it:
export function Login() {
return (
<Layout>
<LoginForm />
</Layout>
)
}
// A layout component to center the content
export function Layout({ children }) {
return (
<div className="w-full h-full bg-white">
<div className="min-w-full min-h-[75vh] flex items-center justify-center">
<div className="w-full h-full max-w-sm p-5 bg-white">
<div>{children}</div>
</div>
</div>
</div>
)
}
```
export function Login() {
return (
<Layout>
<LoginForm />
</Layout>
)
}
// A layout component to center the content
export function Layout({ children }: { children: React.ReactNode }) {
return (
<div className="w-full h-full bg-white">
<div className="min-w-full min-h-[75vh] flex items-center justify-center">
<div className="w-full h-full max-w-sm p-5 bg-white">
<div>{children}</div>
</div>
</div>
</div>
)
}
```
We imported the generated Auth UI component and used them in our pages. Read more about the Auth UI components here.
Yay, we've successfully set up Github Auth! 🎉
Running wasp db migrate-dev and wasp start should now give you a working app with authentication.
To see how to protect specific pages (i.e., hide them from non-authenticated users), read the docs on using auth.
Add gitHub: {} to the auth.methods dictionary to use it with default settings.
entity User {=psl
id Int @id @default(autoincrement())
username String @unique
displayName String
psl=}
// ...
```
```js title="src/auth/github.js"
export const userSignupFields = {
username: () => "hardcoded-username",
displayName: (data) => data.profile.displayName,
};
export function getConfig() {
return {
clientID // look up from env or elsewhere
clientSecret // look up from env or elsewhere
scope: [],
};
}
```
entity User {=psl
id Int @id @default(autoincrement())
username String @unique
displayName String
psl=}
// ...
```
```ts title="src/auth/github.ts"
import { defineUserSignupFields } from 'wasp/server/auth'
export const userSignupFields = defineUserSignupFields({
username: () => "hardcoded-username",
displayName: (data) => data.profile.displayName,
})
export function getConfig() {
return {
clientID, // look up from env or elsewhere
clientSecret, // look up from env or elsewhere
scope: [],
}
}
```
<GetUserFieldsType />
The gitHub dict has the following properties:
configFn: ExtImportThis function should return an object with the Client ID, Client Secret, and scope for the OAuth provider.
<Tabs groupId="js-ts"> <TabItem value="js" label="JavaScript"> ```js title="src/auth/github.js" export function getConfig() { return { clientID, // look up from env or elsewhere clientSecret, // look up from env or elsewhere scope: [], } } ``` </TabItem> <TabItem value="ts" label="TypeScript"> ```ts title="src/auth/github.ts" export function getConfig() { return { clientID, // look up from env or elsewhere clientSecret, // look up from env or elsewhere scope: [], } } ``` </TabItem> </Tabs>userSignupFields: ExtImportRead more about the userSignupFields function here.