## Google OAuth 2.0 クライアント ID 作成

`{TENANT_NAME}`は、Auth0のテナント名。Auth0のApplication -> Settings から Domainを確認できる。

- 承認済みの JavaScript 生成元: `https://{TENANT_NAME}.jp.auth0.com`
- 承認済みのリダイレクト URI: `https://{TENANT_NAME}.jp.auth0.com/login/callback`

## 接続を試す

Googleの`clinet_id`と`client_secret`をAuth0コンソールから保存し、Try Connections からログインを確認できる。

![Auth0 Google](//images.contentful.com/0jyj5pjwic68/15xE9l08vWgdv02x4P2elp/29afdce4930830a9d219f4310fe2db49/____________________________2021-10-02_10.50.29.png)

Firebaseよりも、プロパイダーの数が多いので、SpotifyログインやScopeなどを使いたい時は良さそう。バックエンドでユーザーの検証をしやすいのもポイント。

Auth0 google-oauth2

<h2>Google OAuth 2.0 クライアント ID 作成</h2>
<p><code>{TENANT_NAME}</code>は、Auth0のテナント名。Auth0のApplication -> Settings から Domai...

Auth0ダッシュボードから、「Rules」→「Add email to access token」を選択

![Auth0 add email accessToken](//images.contentful.com/0jyj5pjwic68/VM4KGmSbGn2licHlBuryQ/330cd40a6311f371d25bad98b5a21f83/____________________________2021-10-03_19.15.38.png)

そのままでOK。これでaccessTokenにemailが含まれる。

![スクリーンショット 2021-10-03 19.19.04](//images.ctfassets.net/0jyj5pjwic68/6cm1oi3eeAm1rkBT7akR1X/320526eaf507cceefdee59120d1436c7/____________________________2021-10-03_19.19.04.png)

Nest.jsとpassport-jwtを使用してるので、payloadから取得できる。

```js
validate(payload: unknown): unknown {
  console.log("payload", payload.user);
  return payload;
}
```

Controllerの場合は、

```js
@UseGuards(AuthGuard('jwt'))
@Get('private')
async private(@Request() req) {
  return { message: '✅ Private API Test!', payload: req.user };
}
```

```bash
{"message":"✅ Private API Test!","payload":{"https://example.com/email":"xxx@gmail.com","iss":"https://xxx.jp.auth0.com/","sub":"google-oauth2|xxx","aud":["http://localhost:8080","https://xxx.jp.auth0.com/userinfo"],"iat":xxx,"exp":xxx,"azp":"xxxx","scope":"openid profile email"}}
```

## 参考
[How can Node (express) API lookup email address from token? - Auth0 Community](https://community.auth0.com/t/how-can-node-express-api-lookup-email-address-from-token/29319)

Nest.js Auth0 AccessToken(payload )に email を含める

## Nest.js

```bash
yarn add passport @nestjs/passport passport-jwt jwks-rsa
```

`ExtractJwt.fromAuthHeaderAsBearerToken()`のところで、`BearerToken`を扱っているようです。

```jwt.strategy.ts
import { Injectable } from '@nestjs/common';
import { PassportStrategy } from '@nestjs/passport';
import { ExtractJwt, Strategy } from 'passport-jwt';
import { passportJwtSecret } from 'jwks-rsa';
import * as dotenv from 'dotenv';

dotenv.config();

@Injectable()
export class JwtStrategy extends PassportStrategy(Strategy) {
  constructor() {
    super({
      secretOrKeyProvider: passportJwtSecret({
        cache: true,
        rateLimit: true,
        jwksRequestsPerMinute: 5,
        jwksUri: `${process.env.AUTH0_ISSUER_URL}.well-known/jwks.json`,
      }),

      jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(), // 👈 ポイント
      audience: process.env.AUTH0_AUDIENCE,
      issuer: `${process.env.AUTH0_ISSUER_URL}`,
      algorithms: ['RS256'],
    });
  }

  validate(payload: unknown): unknown {
    return payload;
  }
}
```

```auth.module.ts
import { Module } from '@nestjs/common';
import { PassportModule } from '@nestjs/passport';
import { JwtStrategy } from './jwt.strategy';

@Module({
  imports: [PassportModule.register({ defaultStrategy: 'jwt' })],
  providers: [JwtStrategy,],
  exports: [PassportModule],
})
export class AuthModule {}
```

```users.controller.ts
import { Controller, Get, UseGuards } from '@nestjs/common';
import { AuthGuard } from '@nestjs/passport';

@Controller('users')
export class UsersController {
  @Get('public')
  async test() {
    return '✅ Public API!'
  }

  @UseGuards(AuthGuard('jwt')) // 👈 ガード
  @Get('private')
  async private() {
    return '✅ Private API!'
  }
}
```

## Next.js

**※accessTokenが無い(or違う)と、`users/private`APIは401です。**

```index.js
import axios from "axios";
import { useAuth0 } from "@auth0/auth0-react";

const { getAccessTokenSilently } = useAuth0();

const publicApi = async () => {
  try {
    const res = await axios.get('http://localhost:8080/users/public')
    console.log('✅ res', res);
  } catch (e) {
    console.log(e.message);
  }
}

const privateApi = async () => {
  try {
    const accessToken = await getAccessTokenSilently({
      audience: process.env.NEXT_PUBLIC_AUTH0_AUDIENCE,
      scope: "read:current_user",
    });

    console.log('✅ accessToken', accessToken);

    const res = await axios.get('http://localhost:8080/users/private', {
      headers: {
        Authorization: `Bearer ${accessToken}`, // 👈 accessToken を含める
      },
    });
    console.log('✅ res', res);
    } catch (e) {
    console.log(e.message);
  }
}
```

### 実装結果

![Next.js Next.js  Prisma](//images.contentful.com/0jyj5pjwic68/56mORPNJ9f1wy7Ow2Jp2EK/4bae97b0493b6ddc22ba4a8042c9a6a5/image.png)

## 環境変数

Nest.js

```.env
AUTH0_AUDIENCE='http://localhost:8080'
AUTH0_ISSUER_URL='https://xxxxx.jp.auth0.com/'
```

Next.js

```.env
NEXT_PUBLIC_AUTH0_DOMAIN="xxxxx.jp.auth0.com"
NEXT_PUBLIC_AUTH0_CLIENT_ID="xxxxx"
NEXT_PUBLIC_AUTH0_REDIRECT_URI="http://localhost:3000"
NEXT_PUBLIC_AUTH0_AUDIENCE="http://localhost:8080"
```

## ドキュメント

- [Full-Stack TypeScript Apps: Developing a Secure API with NestJS](https://auth0.com/blog/developing-a-secure-api-with-nestjs-adding-authorization/)
- [Auth0 React SDK Quickstarts: Call an API](https://auth0.com/docs/quickstart/spa/react/02-calling-an-api)


Nest.js Next.js Auth0 JWT検証

```bash
yarn add @auth0/auth0-react
```

```_app.js
import { Auth0Provider } from "@auth0/auth0-react";

function MyApp({ Component, pageProps }) {
  // 👇 Auth0コンソールで確認
  return (
    <Auth0Provider
      domain="xxx.jp.auth0.com"
      clientId="xxx"
      redirectUri="http://localhost:3000/"
    >
      <Component {...pageProps} />
    </Auth0Provider>
  )
}

export default MyApp
```

```index.js
import { useAuth0 } from "@auth0/auth0-react";

export default function Home() {
  const LoginButton = () => {
    const { loginWithRedirect } = useAuth0();

    return <button onClick={() => loginWithRedirect()}>Log In</button>;
  };

  return (
    <div>
        <LoginButton/>
    </div>
  )
}
```

`Allowed Callback URLs`と`Allowed Web Origins`を自分の開発環境と同じように設定しておく。

![Auth0 origin callback](//images.contentful.com/0jyj5pjwic68/4PMZbp3qVHkkvKkfLymigb/f8d1917dbdf5471d68918c6cd8be5667/____________________________2021-10-02_11.16.38.png)

Auth0 google-oauth2

Google OAuth 2.0 クライアント ID 作成

接続を試す

Related

Tags

Share

Table of Contents