2021-05-18 11:19:33 +02:00
---
refactor: move docs into new structure / fix links for SEO (#2416)
## What
This (admittedly massive) PR updates the "physical" documentation
structure and fixes url inconsistencies and SEO problems reported by
marketing. The main points are:
- remove or move directories : advanced, user_guide, deploy, api
- move the files contained within to the appropriate one of topics,
how-to, tutorials, or reference
- update internal doc links and product links to the content
- create client-side redirects for all the urls that have changed.
A number of the files have been renamed in small ways to better match
their url and to make them easier to find. Additionally, the top-level
api directory has been moved to /reference/api/legacy/unleash (see the
discussion points section for more on this).
## Why
When moving our doc structure to diataxis a while back, we left the
"physical' files lying where they were, because it didn't matter much to
the new structure. However, that did introduce some inconsistencies with
where you place docs and how we organize them.
There's also the discrepancies in whether urls us underscores or hyphens
(which isn't necessarily the same as their file name), which has been
annoying me for a while, but now has also been raised by marketing as an
issue in terms of SEO.
## Discussion points
The old, hand-written API docs have been moved from /api to
/reference/api/legacy/unleash. There _is_ a /reference/api/unleash
directory, but this is being populated by the OpenAPI plugin, and mixing
those could only cause trouble. However, I'm unsure about putting
/legacy/ in the title, because the API isn't legacy, the docs are. Maybe
we could use another path? Like /old-docs/ or something? I'd appreciate
some input on this.
2022-11-22 10:05:30 +01:00
title: Google Auth v3
2021-05-18 11:19:33 +02:00
---
> You can also find the complete [source code for this guide](https://github.com/Unleash/unleash-examples/tree/main/v3/securing-google-auth) in the unleash-examples project.
This part of the tutorial shows how to create a sign-in flow for users and integrate with Unleash server project. The implementation assumes that I am working in `localhost` with `4242` port.
2021-08-12 15:04:37 +02:00
This is a simple `index.ts` server file.
2021-05-18 11:19:33 +02:00
```javascript
const unleash = require('unleash-server');
2021-08-12 15:04:37 +02:00
unleash.start(options).then((unleash) => {
2021-05-18 11:19:33 +02:00
console.log(`Unleash started on http://localhost:${unleash.app.get('port')}`);
});
```
2021-06-04 11:17:15 +02:00
### Creating a web application client ID {#creating-a-web-application-client-id}
2021-05-18 11:19:33 +02:00
1. Go to the credentials section in the [Google Cloud Platform Console ](https://console.cloud.google.com/apis/credentials?_ga=2.77615956.-1991581217.1542834301 ).
2. Click **OAuth consent screen** . Type a product name. Fill in any relevant optional fields. Click **Save** .
3. Click **Create credentials > OAuth client ID** .
4. Under **Application type** , select **Web Application** .
5. Type the **Name** .
6. Under **Authorized redirect URIs** enter the following URLs, one at a time.
```
http://localhost:4242/api/auth/callback
```
7. Click **Create** .
8. Copy the **CLIENT ID** and **CLIENT SECRET** and save them for later use.
2021-06-04 11:17:15 +02:00
### Add dependencies {#add-dependencies}
2021-05-18 11:19:33 +02:00
2021-08-12 15:04:37 +02:00
Add two dependencies [`@passport-next/passport` ](https://www.npmjs.com/package/@passport-next/passport ) and [`@passport-next/passport-google-oauth2` ](https://www.npmjs.com/package/@passport-next/passport-google-oauth2 ) inside `index.ts` file
2021-05-18 11:19:33 +02:00
```js
const unleash = require('unleash-server');
const passport = require('@passport-next/passport');
2021-08-12 15:04:37 +02:00
const GoogleOAuth2Strategy =
require('@passport-next/passport-google-oauth2').Strategy;
2021-05-18 11:19:33 +02:00
```
2021-06-04 11:17:15 +02:00
### Configure the Google strategy for use by Passport.js {#configure-the-google-strategy-for-use-by-passportjs}
2021-05-18 11:19:33 +02:00
OAuth 2-based strategies require a `verify` function which receives the credential (`accessToken`) for accessing the Google API on the user's behalf, along with the user's profile. The function must invoke `cb` with a user object, which will be set at `req.user` in route handlers after authentication.
```js
const GOOGLE_CLIENT_ID = '...';
const GOOGLE_CLIENT_SECRET = '...';
const GOOGLE_CALLBACK_URL = 'http://localhost:4242/api/auth/callback';
passport.use(
new GoogleOAuth2Strategy(
{
clientID: GOOGLE_CLIENT_ID,
clientSecret: GOOGLE_CLIENT_SECRET,
callbackURL: GOOGLE_CALLBACK_URL,
},
2021-08-12 15:04:37 +02:00
function (accessToken, refreshToken, profile, cb) {
2021-05-18 11:19:33 +02:00
// Extract the minimal profile information we need from the profile object
// and connect with Unleash to get name and email.
cb(
null,
new unleash.User({
name: profile.displayName,
email: profile.emails[0].value,
}),
);
},
),
);
```
Add `googleAdminAuth()` function and other options
```js
function googleAdminAuth(app) {}
let options = {
adminAuthentication: 'custom',
preRouterHook: googleAdminAuth,
};
2021-08-12 15:04:37 +02:00
unleash.start(options).then((instance) => {
2021-05-18 11:19:33 +02:00
console.log(
`Unleash started on http://localhost:${instance.app.get('port')}` ,
);
});
```
2021-06-04 11:17:15 +02:00
### In `googleAdminAuth` function {#in-googleadminauth-function}
2021-05-18 11:19:33 +02:00
Configure `passport` package.
```js
function googleAdminAuth(app) {
app.use(passport.initialize());
app.use(passport.session());
passport.serializeUser((user, done) => done(null, user));
passport.deserializeUser((user, done) => done(null, user));
// ...
}
```
2021-10-26 23:04:44 +02:00
Implement a preRouter hook for `/auth/google/login` . It's necessary for login with Google.
2021-05-18 11:19:33 +02:00
```js
function googleAdminAuth(app) {
// ...
app.get(
2021-10-26 23:04:44 +02:00
'/auth/google/login',
2021-05-18 11:19:33 +02:00
passport.authenticate('google', { scope: ['email'] }),
);
// ...
}
```
Implement a preRouter hook for `/api/auth/callback` . It's a callback when the login is executed.
```js
function googleAdminAuth(app) {
// ...
app.get(
'/api/auth/callback',
passport.authenticate('google', {
failureRedirect: '/api/admin/error-login',
}),
(req, res) => {
// Successful authentication, redirect to your app.
res.redirect('/');
},
);
// ...
}
```
Implement a preRouter hook for `/api/admin` .
```js
function googleAdminAuth(app) {
// ...
app.use('/api/admin/', (req, res, next) => {
if (req.user) {
next();
} else {
// Instruct unleash-frontend to pop-up auth dialog
return res
.status('401')
.json(
new unleash.AuthenticationRequired({
2021-10-26 23:04:44 +02:00
path: '/auth/google/login',
2021-05-18 11:19:33 +02:00
type: 'custom',
message: `You have to identify yourself in order to use Unleash. Click the button and follow the instructions.` ,
}),
)
.end();
}
});
// ...
}
```
2021-06-04 11:17:15 +02:00
### The complete code {#the-complete-code}
2021-05-18 11:19:33 +02:00
2021-08-12 15:04:37 +02:00
The `index.ts` server file.
2021-05-18 11:19:33 +02:00
```js
'use strict';
const unleash = require('unleash-server');
const passport = require('@passport-next/passport');
const GoogleOAuth2Strategy = require('@passport-next/passport-google-oauth2');
const GOOGLE_CLIENT_ID = '...';
const GOOGLE_CLIENT_SECRET = '...';
const GOOGLE_CALLBACK_URL = 'http://localhost:4242/api/auth/callback';
passport.use(
new GoogleOAuth2Strategy(
{
clientID: GOOGLE_CLIENT_ID,
clientSecret: GOOGLE_CLIENT_SECRET,
callbackURL: GOOGLE_CALLBACK_URL,
},
(accessToken, refreshToken, profile, cb) => {
cb(
null,
new unleash.User({
name: profile.displayName,
email: profile.emails[0].value,
}),
);
},
),
);
function googleAdminAuth(app) {
app.use(passport.initialize());
app.use(passport.session());
passport.serializeUser((user, done) => done(null, user));
passport.deserializeUser((user, done) => done(null, user));
app.get(
2021-10-26 23:04:44 +02:00
'/auth/google/login',
2021-05-18 11:19:33 +02:00
passport.authenticate('google', { scope: ['email'] }),
);
app.get(
'/api/auth/callback',
passport.authenticate('google', {
failureRedirect: '/api/admin/error-login',
}),
(req, res) => {
res.redirect('/');
},
);
app.use('/api/admin/', (req, res, next) => {
if (req.user) {
next();
} else {
return res
.status('401')
.json(
new unleash.AuthenticationRequired({
2021-10-26 23:04:44 +02:00
path: '/auth/google/login',
2021-05-18 11:19:33 +02:00
type: 'custom',
message: `You have to identify yourself in order to use Unleash. Click the button and follow the instructions.` ,
}),
)
.end();
}
});
}
const options = {
adminAuthentication: 'custom',
preRouterHook: googleAdminAuth,
};
2021-08-12 15:04:37 +02:00
unleash.start(options).then((instance) => {
2021-05-18 11:19:33 +02:00
console.log(
`Unleash started on http://localhost:${instance.app.get('port')}` ,
);
});
```