[WEB-2240] Remove OAuth

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
 
      <img width="400" alt="SDK Email Magic Links" src="https://user-images.githubusercontent.com/100632220/217053215-8c369de8-7828-4ad6-ac88-a50918520fc3.png">
 
-   - Toggle on **OAuth**.
-
-     <img width="400" alt="SDK OAuth" src="https://user-images.githubusercontent.com/100632220/217053483-e757d1aa-af18-4af3-a476-45860ca3065f.png">
-
 3. Navigate to [Redirect URLs](https://stytch.com/dashboard/redirect-urls), and add `http://localhost:3000` as the types **Login** and **Sign-up**.
 
    <img width="400" alt="Redirect URLs" src="https://user-images.githubusercontent.com/100632220/217054016-913cabda-098e-4436-9829-2f33e7db05a7.png">
 
-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.
-
-   <img width="400" alt="OAuth configuration" src="https://user-images.githubusercontent.com/100632220/217055674-a7dafc17-6ad3-492f-8dd2-92560d60dc00.png">
-
-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,15 +64,15 @@ 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
 
 This example app showcases a small portion of what you can accomplish with Stytch. Here are a few ideas to explore:
 
 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.
 

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.');
 }

public/js/login.js

@@ -1,32 +1,27 @@
-import { Products } from "https://www.unpkg.com/@stytch/[email protected]/dist/index.esm.js";
-import { stytch } from "./app.js";
+import { Products } from 'https://www.unpkg.com/@stytch/[email protected]/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,