From 3c40c173ad7e56f79e2261b092758cda9ed07ade Mon Sep 17 00:00:00 2001 From: Pei-Yi Lin Date: Mon, 10 Jun 2024 11:16:57 -0700 Subject: [PATCH] Remove OAuth --- README.md | 22 ++++++++-------------- public/js/authenticate.js | 24 +++++++----------------- public/js/login.js | 23 +++++++++-------------- 3 files changed, 24 insertions(+), 45 deletions(-) diff --git a/README.md b/README.md index e9576f3..d20eb72 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ This example application demonstrates how one may use Stytch within a Vanilla Ja This project uses Stytch's [JavaScript SDK](https://stytch.com/docs/sdks/javascript-sdk) which provides pre-built UI components and headless methods to securely interact with Stytch. -This application features Email Magic Links and Google OAuth for authentication, as well as our Sessions Management product to manage user sessions. You can use this application's source code as a learning resource, or use it as a jumping off point for your own project. We are excited to see what you build with Stytch! +This application features Email Magic Links for authentication, as well as our Sessions Management product to manage user sessions. You can use this application's source code as a learning resource, or use it as a jumping off point for your own project. We are excited to see what you build with Stytch! ## Set up @@ -31,19 +31,11 @@ Follow the steps below to get this application fully functional and running usin SDK Email Magic Links - - Toggle on **OAuth**. - - SDK OAuth - 3. Navigate to [Redirect URLs](https://stytch.com/dashboard/redirect-urls), and add `http://localhost:3000` as the types **Login** and **Sign-up**. Redirect URLs -4. Navigate to [OAuth](https://stytch.com/dashboard/oauth), and set up login for Google in the Test environment. Follow all the instructions provided in the Dashboard. If you are not interested in OAuth login you can skip this step. However, the _Continue with Google_ button in this application will not work. - - OAuth configuration - -5. Finally, navigate to [API Keys](https://stytch.com/dashboard/api-keys), and copy your `public_token`. You will need this value later on. +4. Finally, navigate to [API Keys](https://stytch.com/dashboard/api-keys), and copy your `public_token`. You will need this value later on. ### On your machine @@ -56,9 +48,11 @@ npm i ``` Next, open the file `public/js/app.js` and replace the value assigned to the constant `STYTCH_PUBLIC_TOKEN` with your `public_token`. + ```js -const STYTCH_PUBLIC_TOKEN = "public-token-test-123abcd-1234-1234-abcd-123123abcabc"; -``` +const STYTCH_PUBLIC_TOKEN = + 'public-token-test-123abcd-1234-1234-abcd-123123abcabc'; +``` ## Running locally @@ -70,7 +64,7 @@ npm run dev The application will be available at [`http://localhost:3000`](http://localhost:3000). -You'll be able to login with Email Magic Links or Google OAuth and see your Stytch User object, Stytch Session, and see how logging out works. +You'll be able to login with Email Magic Links and see your Stytch User object, Stytch Session, and see how logging out works. ## Next steps @@ -78,7 +72,7 @@ This example app showcases a small portion of what you can accomplish with Stytc 1. Add additional login methods like [Passwords](https://stytch.com/docs/passwords#guides_getting-started-sdk). 2. Replace the pre-built UI with your own using by using the SDK's [headless methods](https://stytch.com/docs/sdks/javascript-sdk). -3. Replace the Google OAuth button with the high converting [Google One Tap UI](https://stytch.com/docs/oauth#guides_google-sdk). +3. Add a Google OAuth button with the high converting [Google One Tap UI](https://stytch.com/docs/oauth#guides_google-sdk). 4. Secure your app further by building MFA authentication using methods like [WebAuthn](https://stytch.com/docs/sdks/javascript-sdk#webauthn). 5. Use [Stytch Sessions](https://stytch.com/docs/sessions) to secure your backend. diff --git a/public/js/authenticate.js b/public/js/authenticate.js index e9aa8b9..778c081 100644 --- a/public/js/authenticate.js +++ b/public/js/authenticate.js @@ -1,36 +1,26 @@ -import { stytch } from "./app.js"; +import { stytch } from './app.js'; // Look for the Stytch token in query params. const queryParams = new URLSearchParams(window.location.search); -const token = queryParams.get("token"); -const tokenType = queryParams.get("stytch_token_type"); +const token = queryParams.get('token'); +const tokenType = queryParams.get('stytch_token_type'); // If a token is found, authenticate it with the appropriate method. if (token && tokenType) { - if (tokenType === "magic_links") { + if (tokenType === 'magic_links') { stytch.magicLinks .authenticate(token, { session_duration_minutes: 60, }) - .then(() => console.log("Successful authentication: Email magic link")) + .then(() => console.log('Successful authentication: Email magic link')) .catch((err) => { console.error(err); alert( - "Email Magic Link authentication failed. See console for details." + 'Email Magic Link authentication failed. See console for details.' ); }); - } else if (tokenType === "oauth") { - stytch.oauth - .authenticate(token, { - session_duration_minutes: 60, - }) - .then(() => console.log("Successful authentication: OAuth")) - .catch((err) => { - console.error(err); - alert("OAuth authentication failed. See console for details."); - }); } } else { // If query params are not found, announce that something went wrong. - alert("Something went wrong. No token found to authenticate."); + alert('Something went wrong. No token found to authenticate.'); } diff --git a/public/js/login.js b/public/js/login.js index f024fcd..45bc971 100644 --- a/public/js/login.js +++ b/public/js/login.js @@ -1,32 +1,27 @@ -import { Products } from "https://www.unpkg.com/@stytch/vanilla-js@0.9.5/dist/index.esm.js"; -import { stytch } from "./app.js"; +import { Products } from 'https://www.unpkg.com/@stytch/vanilla-js@0.9.5/dist/index.esm.js'; +import { stytch } from './app.js'; const styles = { container: { - width: "100%", + width: '100%', }, buttons: { primary: { - backgroundColor: "#4A37BE", - borderColor: "#4A37BE", + backgroundColor: '#4A37BE', + borderColor: '#4A37BE', }, }, }; -const REDIRECT_URL = "http://localhost:3000/authenticate"; +const REDIRECT_URL = 'http://localhost:3000/authenticate'; const config = { - products: [Products.emailMagicLinks, Products.oauth], + products: [Products.emailMagicLinks], emailMagicLinksOptions: { loginRedirectURL: REDIRECT_URL, loginExpirationMinutes: 60, signupRedirectURL: REDIRECT_URL, signupExpirationMinutes: 60, }, - oauthOptions: { - providers: [{ type: "google" }], - loginRedirectURL: REDIRECT_URL, - signupRedirectURL: REDIRECT_URL, - }, }; /* @@ -39,10 +34,10 @@ to a protected page after a user successfully logs in. const callbacks = { onEvent: (message) => console.log(message), onError: (error) => console.log(error), -} +}; stytch.mountLogin({ - elementId: "#stytch-sdk", + elementId: '#stytch-sdk', styles, config, callbacks,