Merge pull request #3 from transferwise/DEVEX-45_oauth-connect-popup

OAuth connect in popup window sample

CODEOWNERS

@@ -0,0 +1 @@
+* @transferwise/wp-devex

common/db/index.ts

@@ -1,17 +1,29 @@
 import JSONdb from '../lib/Simple-JSONdb';
 
 import type { Config } from '../types/Config';
+import type { SelectedProfile } from '../types/SelectedProfile';
 import type { Tokens } from '../types/Tokens';
 
 const ONE_HOUR_IN_MS = 60 * 60 * 1000;
 
 // Instead of proper database we have a simple JSON file
 export const store = new JSONdb('../storage.json');
 
-export const getSelectedWiseProfileId = () => store.get('selectedProfileId') as string;
+export const getSelectedWiseProfileId = () => {
+  const selectedProfile = store.get('selectedProfile');
+  if (!selectedProfile) {
+    return null;
+  }
+  return (selectedProfile as SelectedProfile).id;
+}
 
 export const getWiseEnvironmentConfig = () => store.get('config') as Config;
 
+export const getWiseOAuthPageURL = () => {
+  const config = getWiseEnvironmentConfig();
+  return `${config.oauthPageUrl}?client_id=${config.clientId}&redirect_uri=${config.redirectUri}`;
+};
+
 export const getWiseTokens = () => {
   const selectedProfileId = getSelectedWiseProfileId();
   if (!selectedProfileId) {

common/server/exchangeAuthCodeForToken.ts

@@ -37,7 +37,7 @@ export const exchangeAuthCodeForToken = async (
   // Stores Wise profileId and tokens in our demo database (storage.json).
   // In a production environment, you would associate these tokens with a logged-in user
   // in your system.
-  store.set('selectedProfileId', profileId);
+  store.set('selectedProfile', { id: profileId });
   store.set(profileId, {
     accessToken: result.access_token,
     refreshToken: result.refresh_token,

common/server/fetchProfileDetails.ts

@@ -3,6 +3,9 @@ import { getSelectedWiseProfileId, getWiseEnvironmentConfig, getWiseAccessToken
 export const fetchProfileDetails = async () => {
   const config = getWiseEnvironmentConfig();
   const selectedProfileId = getSelectedWiseProfileId();
+  if (!selectedProfileId) {
+    throw Error('No selectedProfileId');
+  }
   const oauthToken = getWiseAccessToken();
   const headers = new Headers();
   headers.set('Authorization', `Bearer ${oauthToken}`);

common/server/refreshWiseToken.ts

@@ -6,6 +6,9 @@ export const refreshWiseToken = async () => {
   const config = getWiseEnvironmentConfig();
   const refreshToken = getWiseRefreshToken();
   const selectedProfileId = getSelectedWiseProfileId();
+  if (!selectedProfileId) {
+    throw Error('No selectedProfileId');
+  }
   const headers = new Headers();
   headers.set('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
   headers.set(

common/types/SelectedProfile.ts

@@ -0,0 +1,3 @@
+export type SelectedProfile = {
+  id: string
+};

oauth-connect-popup/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+**/.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

oauth-connect-popup/README.md

@@ -0,0 +1,34 @@
+# OAuth Connect Popup Sample 
+
+In our regular authorization flow your application redirects the customer to the Wise authorization page. With some additional steps it can be implemented inside a popup window, meaning that the user does not leave your app.
+
+On a high level you'll only need to do two changes:
+- open the Wise authorization page in a popup window instead of a full redirect
+- build a mechanism that understands when the flow is complete
+
+See sequence diagram below for more details.
+
+More info about [Authentication and access](https://docs.wise.com/api-docs/features/authentication-access) and [Authorization flow in a Popup Window](https://docs.wise.com/api-docs/guides/oauth-popup).
+
+## Key elements
+
+We're using [Next.js](https://nextjs.org/), because it allows us to show server and client side code in a single app.
+
+Start off by exploring `/pages/index.tsx`.
+
+## Running it locally
+
+Prerequisite: make sure you have [Node.js](https://nodejs.org/en) installed.
+- `npm install` (installs all the packages)
+- `npm run dev` (starts the app at http://localhost:3000/)
+
+## Recording
+
+https://github.com/transferwise/wise-platform-samples/assets/39053304/b9b8c4a8-7e42-4b4b-99b0-204ebfe91ec2
+
+## Sequence diagram
+
+![oauth-consent-popup](https://github.com/transferwise/wise-platform-samples/assets/39053304/ffee4fd7-7d1b-46a4-97ea-b67fcaf54b94)
+
+For more details have a look at our [Authorization flow in a Popup Window](https://docs.wise.com/api-docs/guides/oauth-popup) guide.
+

oauth-connect-popup/next.config.js

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  transpilePackages: ['common'],
+}
+
+module.exports = nextConfig