Skip to content

Commit 597d7ce

Browse files
committed
docs: add OAuth authentication documentation for AdminForth
1 parent 1af53a8 commit 597d7ce

File tree

1 file changed

+122
-0
lines changed
  • adminforth/documentation/docs/tutorial/05-Plugins

1 file changed

+122
-0
lines changed
Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
# OAuth Authentication
2+
3+
The OAuth plugin enables OAuth2-based authentication in AdminForth, allowing users to sign in using their Google, GitHub, or other OAuth2 provider accounts.
4+
5+
## Installation
6+
7+
To install the plugin:
8+
9+
```bash
10+
npm install @adminforth/oauth --save
11+
npm install @adminforth/google-oauth-adapter --save # for Google OAuth
12+
```
13+
14+
## Configuration
15+
16+
### 1. OAuth Provider Setup
17+
18+
You need to get the client ID and client secret from your OAuth2 provider.
19+
20+
For Google:
21+
1. Go to the [Google Cloud Console](https://console.cloud.google.com)
22+
2. Create a new project or select an existing one
23+
3. Go to `APIs & Services``Credentials`
24+
4. Create credentials for OAuth 2.0 client IDs
25+
5. Select application type: "Web application"
26+
6. Add your application's name and redirect URI
27+
7. In "Authorized redirect URIs", add next URI: `https://your-domain/oauth/callback`, `http://localhost:3500/oauth/callback`. Please remember to include BASE_URL in the URI if you are using it in project e.g. `https://your-domain/base/oauth/callback`
28+
8. Add the credentials to your `.env` file:
29+
30+
```bash
31+
GOOGLE_OAUTH_CLIENT_ID=your_google_client_id
32+
GOOGLE_OAUTH_CLIENT_SECRET=your_google_client_secret
33+
```
34+
35+
### 2. Plugin Configuration
36+
37+
Configure the plugin in your user resource file:
38+
39+
```typescript title="./resources/adminuser.ts"
40+
import OAuthPlugin from '@adminforth/oauth';
41+
import AdminForthAdapterGoogleOauth2 from '@adminforth/google-oauth-adapter';
42+
43+
// ... existing resource configuration ...
44+
45+
plugins: [
46+
new OAuthPlugin({
47+
adapters: [
48+
new AdminForthAdapterGoogleOauth2({
49+
clientID: process.env.GOOGLE_OAUTH_CLIENT_ID,
50+
clientSecret: process.env.GOOGLE_OAUTH_CLIENT_SECRET,
51+
}),
52+
],
53+
emailField: 'email', // Required: field that stores the user's email
54+
}),
55+
]
56+
```
57+
58+
### 3. Email Confirmation
59+
60+
The plugin supports automatic email confirmation for OAuth users. To enable this:
61+
62+
1. Add the `email_confirmed` field to your database schema:
63+
64+
```prisma title='./schema.prisma'
65+
model adminuser {
66+
// ... existing fields ...
67+
email_confirmed Boolean @default(false)
68+
}
69+
```
70+
71+
2. Run the migration:
72+
73+
```bash
74+
npx prisma migrate dev --name add-email-confirmed-to-adminuser
75+
```
76+
77+
3. Configure the plugin with `emailConfirmedField`:
78+
79+
```typescript title="./resources/adminuser.ts"
80+
new OAuth2Plugin({
81+
// ... adapters configuration ...
82+
emailField: 'email',
83+
emailConfirmedField: 'email_confirmed' // Enable email confirmation tracking
84+
}),
85+
```
86+
87+
When using OAuth:
88+
- New users will have their email automatically confirmed (`email_confirmed = true`)
89+
- Existing users will have their email marked as confirmed upon successful OAuth login
90+
- The `email_confirmed` field must be a boolean type
91+
92+
### 4. Open Signup
93+
94+
By default, users must exist in the system before they can log in with OAuth. You can enable automatic user creation for new OAuth users with the `openSignup` option:
95+
96+
```typescript title="./resources/adminuser.ts"
97+
new OAuth2Plugin({
98+
// ... adapters configuration ...
99+
openSignup: {
100+
enabled: true,
101+
defaultFieldValues: { // Set default values for new users
102+
role: 'user',
103+
},
104+
},
105+
}),
106+
```
107+
108+
### 5. UI Customization
109+
110+
You can customize the UI of the OAuth login buttons by using the `iconOnly` and `pill` options.
111+
112+
```typescript title="./resources/adminuser.ts"
113+
new OAuth2Plugin({
114+
// ... adapters configuration ...
115+
iconOnly: true, // Show only provider icons without text
116+
pill: true, // Use pill-shaped buttons instead of rectangular
117+
}),
118+
```
119+
120+
121+
122+

0 commit comments

Comments
 (0)