-
【Next.js】middlewareを用いて認証チェック時にリダレクトする
以前、Cognitoを使った認証処理を実装しました。このときは認証処理を実装しただけで、認証後にのみアクセスできる画面に認証前はアクセスできないようにする処理を実装していませんでしたので、本記事で実装したいと思います。はじめはuseEffectに認証前... -
【Lambda】SAMを使用してローカル環境でLambdaを実行する
本記事ではAWS SAMを利用してローカル環境でAPIGateway✕Lambda環境を再現します。ランタイムはPython3.12を使用します。 使用するAWSサービスとツールについて 本記事で利用するAWSサービスについて説明します。 Lambda AWS Lambda（ラムダ）は、Amazon We... -
【Next.js】Next.jsからAppSyncを使ってアカウント情報を取得する②
前回はDynamoDBとAppSyncを作成しました。今回は作成したAppSyncからアカウント情報を取得する処理をNext.jsに実装していきます。前回の記事はこちらを参照してください。 AppSyncとNext.jsを接続する 作成したAppSyncとNext.jsを接続するにあたり、エンド... -
【Next.js】Next.jsからAppSyncを使ってアカウント情報を取得する①
前回はCognitoを利用して認証処理を作成しました。今回はCognitoのユーザーIDに紐づく情報をDynamoDBからAppSyncを利用して取得します。前回の記事はこちらを参照してください。 DynamoDB Amazon DynamoDBは、Amazon Web Services（AWS）が提供する完全マ... -
【Next.js】Next.jsからCognitoを使ってログイン画面を実装する②
前回はCognitoユーザープールと動作確認用のユーザーを作成しました。今回は認証処理の実装と作成したユーザーを用いて動作確認を実施します。前回の記事はこちらを参照してください。 Contextとは 認証処理を実装するにあたりReactのContext機能を利用し... -
【Next.js】Next.jsからCognitoを使ってログイン画面を実装する①
前回はログイン画面を作成し、バリデーションチェックしてからフォームから入力情報を渡すところまでを実装しました。前回の記事はこちらを参照してください。 今回はいよいよ認証処理を実装していきます。認証処理を実装するにあたり、Amazon Cognitoを利... -
【Next.js】react-hook-formを用いたバリデーションチェック
前回Next.jsをインストールしたところで、次はログイン画面を作成していこうと思います。まず本記事ではログイン画面の認証アクション云々の前に、フォームやバリデーション機能について実装します。また今後勤怠管理システムを作成していくため、システム... -
【Next.js】Next.jsのインストール方法と初期設定
Next.jsとは、ReactをベースにしたオープンソースのフルスタックJavaScriptフレームワークです。Next.jsは、静的サイト生成（SSG）やサーバーサイドレンダリング（SSR）といった機能を簡単に実装できるのが大きな特徴で、パフォーマンスの向上やSEO対策が... -
【Laravel】#03 RESTful API の実装（CRUD）
前回はLaravelで開発環境の構築（文字コードやロケール/DB周り）を実施しました。今回は基本となる、前回投入したデータを登録・更新・削除・参照するAPIを作成していきます！作成する機能は以下の通りです。 つぶやきの一覧が取得できる つぶやきを投稿で... -
【Laravel】#02 tymon/jwt-authの導入
APIを作成するにあたり、必ず必要になるのが認証機能です。Laravelでは標準でトークン認証が用意されていますが、実際のAPIアプリケーションでよく利用されているのはJWT認証です。本記事ではJWT認証を提供するtymon/jwt-auth パッケージを利用したいと思...
12