Googleアカウントでログインする機能の実装

概要

googleアカウントでログインする機能の勉強。
メールアドレスでも出来るし、他SNSのアカウントでも出来るらしい。

手順

1. https://clerk.com/ にアクセスして、アカウントを作成する

2. ログイン

3. Create applicationを押下

4. 作るアプリケーションの名前を入力する

5. 使用したいログイン方法を押下する。画像の場合はEmailとGoogleアカウント

6. Create applicationを押下

7. 遷移先のページから、シークレットキーなどの情報を取ってくる

8. .envファイルにそのまま貼り付け

9. .gitignoreファイルに、.envを追加
   

10. ターミナルで以下コマンドを叩く

    npm install @clerk/nextjs
    

11. あとはドキュメント通り

12. 結果
    

13. 使用したGoogleアカウントでログイン出来てることを確認。
    

ちょい足し

googleアカウントのアイコンでログイン情報を表示

• 変更前
  

• 変更後
  

• コード

  "use client";
  
  import { UserButton } from "@clerk/nextjs";
  
  const testUserPage = () => {
    return (
  <div>
    <UserButton />
  </div>
    );
  };
      export default ProtectedPage;
  

取り敢えずなぐり書き