Merge pull request #92 from supertokens/docs/migration

docs: add migration guide in changelog and update example

Author: rishabhpoddar

CHANGELOG.md

@@ -34,6 +34,49 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 -   Updates dependencies and backend config for the vue with-thirdpartyemailpassword example app
 
+### Migration
+
+#### Renamed parameters in `getAuthorisationURLWithQueryParamsAndSetState`
+
+Before:
+
+```
+    const authUrl = await ThirdPartyEmailPassword.getAuthorisationURLWithQueryParamsAndSetState({
+        providerId: "google",
+        authorisationURL: `${websiteDomain}/auth/callback/google`,
+    });
+```
+
+After:
+
+```
+    const authUrl = await ThirdPartyEmailPassword.getAuthorisationURLWithQueryParamsAndSetState({
+        thirdPartyId: "google",
+        frontendRedirectURI: `${websiteDomain}/auth/callback/google`,
+    });
+```
+
+##### If the provider is redirecting to the backend directly (i.e.: Apple)
+
+Before:
+
+```
+    const authUrl = await ThirdPartyEmailPassword.getAuthorisationURLWithQueryParamsAndSetState({
+        providerId: "apple",
+        authorisationURL: `${websiteDomain}/auth/callback/apple`,
+    });
+```
+
+After:
+
+```
+    const authUrl = await ThirdPartyEmailPassword.getAuthorisationURLWithQueryParamsAndSetState({
+        thirdPartyId: "apple",
+        frontendRedirectURI: `${websiteDomain}/auth/callback/apple`,
+        redirectURIOnProviderDashboard: `${apiDomain}/auth/callback/apple`
+    });
+```
+
 ## [0.6.0] - 2023-03-14
 
 ## Additions

examples/vuejs/with-thirdpartyemailpassword/api-server/index.ts

@@ -30,23 +30,44 @@ supertokens.init({
             providers: [
                 // We have provided you with development keys which you can use for testing.
                 // IMPORTANT: Please replace them with your own OAuth keys for production use.
-                ThirdPartyEmailPassword.Google({
-                    clientId: "1060725074195-kmeum4crr01uirfl2op9kd5acmi9jutn.apps.googleusercontent.com",
-                    clientSecret: "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",
-                }),
-                ThirdPartyEmailPassword.Github({
-                    clientSecret: "e97051221f4b6426e8fe8d51486396703012f5bd",
-                    clientId: "467101b197249757c71f",
-                }),
-                ThirdPartyEmailPassword.Apple({
-                    clientId: "4398792-io.supertokens.example.service",
-                    clientSecret: {
-                        keyId: "7M48Y4RYDL",
-                        privateKey:
-                            "-----BEGIN PRIVATE KEY-----\nMIGTAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBHkwdwIBAQQgu8gXs+XYkqXD6Ala9Sf/iJXzhbwcoG5dMh1OonpdJUmgCgYIKoZIzj0DAQehRANCAASfrvlFbFCYqn3I2zeknYXLwtH30JuOKestDbSfZYxZNMqhF/OzdZFTV0zc5u5s3eN+oCWbnvl0hM+9IW0UlkdA\n-----END PRIVATE KEY-----",
-                        teamId: "YWQCXGJRJL",
+                {
+                    config: {
+                        thirdPartyId: "google",
+                        clients: [
+                            {
+                                clientId: "1060725074195-kmeum4crr01uirfl2op9kd5acmi9jutn.apps.googleusercontent.com",
+                                clientSecret: "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",
+                            },
+                        ],
                     },
-                }),
+                },
+                {
+                    config: {
+                        thirdPartyId: "github",
+                        clients: [
+                            {
+                                clientId: "467101b197249757c71f",
+                                clientSecret: "e97051221f4b6426e8fe8d51486396703012f5bd",
+                            },
+                        ],
+                    },
+                },
+                {
+                    config: {
+                        thirdPartyId: "apple",
+                        clients: [
+                            {
+                                clientId: "4398792-io.supertokens.example.service",
+                                additionalConfig: {
+                                    keyId: "7M48Y4RYDL",
+                                    privateKey:
+                                        "-----BEGIN PRIVATE KEY-----\nMIGTAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBHkwdwIBAQQgu8gXs+XYkqXD6Ala9Sf/iJXzhbwcoG5dMh1OonpdJUmgCgYIKoZIzj0DAQehRANCAASfrvlFbFCYqn3I2zeknYXLwtH30JuOKestDbSfZYxZNMqhF/OzdZFTV0zc5u5s3eN+oCWbnvl0hM+9IW0UlkdA\n-----END PRIVATE KEY-----",
+                                    teamId: "YWQCXGJRJL",
+                                },
+                            },
+                        ],
+                    },
+                },
             ],
         }),
         Session.init(),

examples/vuejs/with-thirdpartyemailpassword/package.json

@@ -17,8 +17,8 @@
         "express": "^4.17.3",
         "helmet": "^5.0.2",
         "pinia": "^2.0.13",
-        "supertokens-node": "^13.1.5",
-        "supertokens-web-js": "^0.5.0",
+        "supertokens-node": "latest",
+        "supertokens-web-js": "latest",
         "ts-node-dev": "^2.0.0",
         "vue": "^3.2.31",
         "vue-router": "^4.0.14"

examples/vuejs/with-thirdpartyemailpassword/src/main.ts

@@ -8,7 +8,7 @@ import App from "./App.vue";
 import router from "./router";
 
 const apiPort = import.meta.env.VUE_APP_API_PORT || 3001;
-const apiDomain = import.meta.env.VUE_APP_API_URL || `http://localhost:${apiPort}`;
+export const apiDomain = import.meta.env.VUE_APP_API_URL || `http://localhost:${apiPort}`;
 
 SuperTokens.init({
     appInfo: {

examples/vuejs/with-thirdpartyemailpassword/src/views/AuthView.vue

@@ -2,6 +2,7 @@
 import ThirdPartyEmailPassword from "supertokens-web-js/recipe/thirdpartyemailpassword";
 import Session from "supertokens-web-js/recipe/session";
 import { defineComponent } from "vue";
+import { apiDomain } from "../main";
 
 const websitePort = import.meta.env.VUE_APP_WEB_PORT || 3000;
 const websiteDomain = import.meta.env.VUE_APP_WEB_URL || `http://localhost:${websitePort}`;
@@ -145,33 +146,34 @@ export default defineComponent({
         },
         onGithubPressed: async function () {
             const authUrl = await ThirdPartyEmailPassword.getAuthorisationURLWithQueryParamsAndSetState({
-                providerId: "github",
+                thirdPartyId: "github",
 
                 // This is where github should redirect the user back after login or error.
                 // This URL goes on the github dashboard as well.
-                authorisationURL: `${websiteDomain}/auth/callback/github`,
+                frontendRedirectURI: `${websiteDomain}/auth/callback/github`,
             });
 
             window.location.assign(authUrl);
         },
         onGooglePressed: async function () {
             const authUrl = await ThirdPartyEmailPassword.getAuthorisationURLWithQueryParamsAndSetState({
-                providerId: "google",
+                thirdPartyId: "google",
 
                 // This is where google should redirect the user back after login or error.
                 // This URL goes on the google dashboard as well.
-                authorisationURL: `${websiteDomain}/auth/callback/google`,
+                frontendRedirectURI: `${websiteDomain}/auth/callback/google`,
             });
 
             window.location.assign(authUrl);
         },
         onApplePressed: async function () {
             const authUrl = await ThirdPartyEmailPassword.getAuthorisationURLWithQueryParamsAndSetState({
-                providerId: "apple",
+                thirdPartyId: "apple",
 
                 // This is where apple should redirect the user back after login or error.
                 // This URL goes on the apple dashboard as well.
-                authorisationURL: `${websiteDomain}/auth/callback/apple`,
+                frontendRedirectURI: `${websiteDomain}/auth/callback/apple`,
+                redirectURIOnProviderDashboard: `${apiDomain}/auth/callback/apple`,
             });
 
             window.location.assign(authUrl);