Amplify を使わず React で AWS Cognito 認証を使う
こんにちは、kenzauros です。 前提 タイトルにもあるとおり、今回のテーマは「Amplify を使わず React で AWS Cognito 認証を使う」です。 Amplify 自体は使いません Amplify CLI も使いません Amplify の JS ライブラリ (aws-amplify) のみ使います 既存の Cognito ユーザープールを流用します また、画面は素の HTML だけにしました。 UI フレームワークはプロジェクトによって異なること、 UI のコードが含まれると本質的な部分がわかりづらくなることから、今回は最低限にしています。 対象とする読者は下記のとおりです。 React, React Hooks がある程度使える方 Congino のユーザープールは設定できる方 Amplify のプラットフォームを使いたいわけではない方 結局 React で Co
AWS Amplifyで、`withAuthenticator`と`Auth.signOut`を併用する | WP-kyoto
aws-amplifyJavaScriptNode.js AWS Amplifyで、`withAuthenticator`と`Auth.signOut`を併用する AWS AmplifyのSDK・ライブラリを使うと、認証系のUIや操作をほとんど自分で実装する必要がなくなります。 ただし、任意のUIライブラリ（BootstrapやMaterial UIなど）でAuth系の操作を行いた […] AWS AmplifyのSDK・ライブラリを使うと、認証系のUIや操作をほとんど自分で実装する必要がなくなります。 import type { AppProps } from 'next/app' import Amplify from 'aws-amplify'; import { withAuthenticator } from '@aws-amplify/ui-react' import ampl
AWS Amplify + React で認証を実装する中でハマったアレコレ | DevelopersIO
Amplify/AppSyncとReactを利用したプロダクトで、Amplifyの認証(Cognito)を利用してログイン、登録フォーム、PrivateRouteを作成した際にハマった内容をご紹介します。 ども、もこ@札幌オフィスです。 昨年の年末からAWSJ様によるプログラム「APN Next Generation Engineer Leaders Dojo」（以下ANGEL Dojoと表記）に参加しています。 Amplify/AppSyncとReactを利用したプロダクトで、Amplifyの認証(Cognito)を利用してログイン、登録フォーム、PrivateRouteを作成した際にハマった内容をご紹介します。 ANGEL Dojoとは？ ANGEL Dojoでは次世代を担うAPNの若手のエンジニアの方々に、擬似プロジェクトを通じてアジャイル、DevOps、モダンなアプリケーション開発
【多分初心者向け】AWS Amplify Studio に触ってみて、とりあえず1からwebページを作ってみた | DevelopersIO
【多分初心者向け】AWS Amplify Studio に触ってみて、とりあえず1からwebページを作ってみた こんにちは、リサリサです。Amplify も Figma も全然分からないのですが、AWS Amplify Studio に触ってみたので、ブログにしてみます。 ↓のブログ通りにして動かしてみましたが、本当に何も分からなかっため、なかなか苦労しました。このブログだと分かってる前提でさくさく進んで行ってしまう所があるので、苦労した所も含め、丁寧めに書いていければと思います。多分、この通りにやれば、初心者でもデプロイまでできるはずなので、多分初心者向け… ブログ通りに作ってできたページは、こちら。 そのあともう少し頑張った結果がこちら。可愛くなりました！きもーちだけレスポンシブル… なかなか大変ではありましたし、見て頂くと色々言いたいことがあるのは分かりますが、フロントサイドほぼ分か
Amplify StudioがどのようにFigmaデータをReact componentに変換しているのか
こんにちは！Amplifyの改善を行っている @watilde です。この記事は AWS Amplify Advent Calendar 2021 と Figma Advent Calendar 2021 の 25 日目の記事です。 Amplify Studio の発表 2021年の12月3日に開催された re:Invent にて Amplify Studio が発表されました。新機能としてFigmaでデザインしたコンポーネントを Amplify Studio にてデータベース内のテーブルのスキーマと紐付けし、可読性の高い React のコンポーネントとして出力する “Figma to code” が追加されました。 https://docs.amplify.aws/console/ 本記事では、amplifyコマンドがどのように Figma, Amplify Studio で設定したコン
AWS AmplifyのAmplify UIの中身を軽くみてみる | WP-kyoto
AWS Amplify Advent Calendar 2021の記事です。 以前仕事がらみで、AWS AmplifyのUI Component (Amplify UIになる前のライブラリ)のコード読みをしたことがあったので、その時の話を軽くしたいと思います。 パッケージ構成 Amplify UIは以下のnpm Packageで構成されています。 @aws-amplify/ui @aws-amplify/ui-components @aws-amplify/ui-react @aws-amplify/ui-vue @aws-amplify/ui-angular 他にも、@aws-amplify/ui-storybookがありますが、これはドキュメント生成などの用途なので省きます。 パッケージの使い方 ユーザーは基本的に、@aws-amplify/ui-{UI-Framework-Name}
Amplify GraphQL Transformer v2 まとめ
「AWS Amplify Advent Calendar 2021」 19日目の記事となります 記事の概要 2021/11/23に、Amplify GraphQL Transformer v2(以下v2と表記)が発表されました[1]。以前のGraphQL Transformer v1(以下v1と表記)から大幅なアップデートがいくつも入っており、Breaking Changeも少なからずあります。この記事では GraphQL Transformer v2の主な変更点 GraphQL Transformer v1からのMigration時の注意事項 の2点についてまとめてみました！ 想定読者 Amplify CLIでGraphQL APIを利用している人 これから利用を検討しているが、既存のブログ記事などがv1で記述されており差分が知りたい人 話さないこと(及び参考資料) Amplify 自体
AWS AmplifyのReact向けチュートリアルをTypeScript化しながら体験してみた
はじめに 今回は数あるAWSサービスの中でもフロントエンドエンジニアが扱うにとても便利なサービスであるAmplifyのチュートリアルを試してみるついでにTypeScript化、Hooks部分をRedux化しながら進めてみます。 AWS Amplifyとは 今回は数あるサービスの中でもフロントエンドエンジニアが扱うにとても便利なサービスであるAmplifyのチュートリアルを試してみます。AWS Amplifyは、ひとつの機能を提供しているサービスというわけではなく、Webアプリケーションやモバイルアプリケーションに必要なサービスを複合的に構築するためのプラットフォームのようなものになります。APIや認証、CDN、ホスティングなどなどコマンドやWebコンソールから簡単に機能追加することができるおそろしく便利なサービスです。 GitHubと連携することでCI/CDまで対応しています。 フロントエ
Next.jsをAmplifyで運用する場合に必ず設定すべき項目
先日 AWS のサポートの方とやり取りする中で発覚した内容をまとめた記事です。 結論 Live package updates の Next.js version に、アプリケーションで使用している Next.js のバージョンに合わせた値を設定する Live package updates？ Live package updatesって何？という人も居るかもしれませんが、Amplify コンソールのビルドの設定から確認できるこれです。 公式ドキュメントによる説明は以下です。 ライブパッケージアップデートでは、これらの依存関係のバージョンを上書きして、特定のバージョンを指定したり、常に最新のバージョンがインストールされるようにしたりすることができます。 これだけではピンと来ないかもしれないので、実際の設定画面をもう少し見てみます。 Build image settingsのEditボタンを
Amplify のビルド速度を効率化しましょう！ - Qiita
長くつかっているとAmplify のビルド時間が気になってきます。 アジャイルをまわしているとビルド速度の改善が生産性にかかわってくるため戦ってきました。 そこで得た TIPS を二つご紹介します！ 差分ビルドの適用 Amplify は環境変数を設定することによって差分ビルドを行うことができます。 フロントエンドのビルドがない時はフロントエンドフェーズのビルドをスキップ ホスティングしている環境ごとに設定可能です！ いくつかの問題点 最新版は確認できてないのですが差分ビルドを全体に適用していると新規環境作成時にフロントエンドのビルドが行われない問題がありました。 preview などで新規作成する場合、front deploy がスキップされてしまいます。issue にて報告ですが、対処されたかは不明です。 backend の差分ビルドをしていると amplify update auth
AWS Amplify announces the new GraphQL Transformer v2. More feature-rich, flexible, and extensible. | Amazon Web Services
Front-End Web & Mobile AWS Amplify announces the new GraphQL Transformer v2. More feature-rich, flexible, and extensible. Today, AWS Amplify announces the GraphQL Transformer version 2, enabling developers to develop more feature-rich, flexible, and extensible GraphQL-based app backends even with minimal cloud expertise. The AWS Amplify CLI is a command line toolchain that helps frontend developer
amplify でモノレポのパッケージをデプロイする最小構成
今思えばすごく簡単な話でしたが、monorepo を実現する最小構成が分からなくてちょっとつまづいたのでメモです。 そもそも monorepo 用の設定はいるのか？ amplify は標準で monorepo 用のサポートや機能が存在しています。 ユーザーからしてみれば、root の package.json から 各 workspace への alias を貼っておき、root から見たデプロイフォルダを指定さえできれば困らないはずで特にサポートは不要かにも思えます。 しかしそうしなくても amplify が提供している monorepo サポートを使えば、その package に定義された npm scripts をそのまま呼び出せたりと何かと便利なので使っていきます。 最小構成 version: 1 applications: - appRoot: packages/hoge fro
AWS AmplifyでNext.jsのISRを試してみる | DevelopersIO
まえがき AWS AmplifyでついにNext.jsのISRに対応したようです。実際にやってみる。 Deploy and host server-side rendered apps with Amplify - AWS Amplify 少しハマったので備忘録も兼ねて。 Amplify + Next.jsをデプロイ Next.jsのプロジェクトを作成 yarn create next-app --typescript ✔ What is your project named? … next-sample-app Next.jsにISRのページを作成 サンプルでISRのページを新規作成します。簡単にタイムスタンプを表示し、5秒間キャッシュするようにします。 pages/isr.tsx import Head from 'next/head' import styles from '../s
Amplify ConsoleでServer Side Renderingするチュートリアルを作った
リポジトリのセットアップ GitHubにプライベートでリポジトリを作成します。私はamplify-ssr-tutorialという名前で作成しました。 Note: It is recommended to run this command from the root of your app directory ? Enter a name for the project amplifyssrtutorial ? Enter a name for the environment dev ? Choose your default editor: IntelliJ IDEA ? Choose the type of app that you're building javascript Please tell us about your project ? What javascript fra
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://ordinarycoders.com/blog/article/nextjs-aws-amplify
jest test case to test Auth.currentSession() · Issue #3605 · aws-amplify/amplify-js
ノーコード時代のアーキテクチャ
https://docs.amplify.aws/cli/custom/cdk/
Amplify+AppSync+AuroraServerlessを一ヶ月半使って分かった苦労話｜F Lab｜Fixel株式会社
Deploy Steps failure · Issue #2073 · aws-amplify/amplify-hosting