Refresh logic (#4)

* added one commit * added composer.lock * added changes to sample app * added testing * added more documentation * added sample app code * added files * added files * added files * added files * added files * added files * added README changes * added README changes * added refresh logic * added README
descope · Jun 29, 2023 · df2b5e6 · df2b5e6
1 parent bc18d74
commit df2b5e6
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 40 deletions.
diff --git a/README.md b/README.md
@@ -57,21 +57,26 @@ To run the tests, run this command:
 ./vendor/bin/phpunit --verbose src/tests/DescopeSDKTest.php
 ```
 
-## Other Code Samples
+## Running the PHP Sample App
 
-1. [PHP Sample App](https://github.com/descope/php-sdk/sample/)
-2. [WordPress Plugin](https://github.com/descope-sample-apps/wordpress-plugin)
+In the `sample/static/descope.js`, replace the **projectId** with your Descope Project ID, which you can find in the [Descope Console](https://app.descope.com/settings/project).
 
-## Running the PHP Sample App
+If you haven't already, make sure you run the composer command listed above, to install the necessary SDK packages.
 
-Run this command, from the root directory, to install the necessary dependencies and start the sample app:
+Then, run this command from the root directory, to start the sample app:
 
 ```
 php -S localhost:3000 -t sample/
 ```
 
 The app should now be accessible at http://localhost:3000/ from your web browser.
 
+This sample app showcases a Descope Flow using the WebJS SDK and PHP sessions to retain user information across multiple pages. It also showcases initializing the SDK and using it to validate the session token from formData sent from `login.php`.
+
+## Other Code Samples
+
+1. [WordPress Plugin](https://github.com/descope-sample-apps/wordpress-plugin)
+
 ## Feedback
 
 ### Contributing

diff --git a/sample/login.php b/sample/login.php
@@ -12,48 +12,60 @@
 </head>
     <div id="container"></div>
     <script>
-        sdk.refresh()
-        const container = document.getElementById("container")
+        function sendFormData(sessionToken, userDetails) {
+            var formData = new FormData();
+            formData.append("sessionToken", sessionToken);
+            formData.append("userDetails", JSON.stringify(userDetails));
+
+            var xmlHttp = new XMLHttpRequest();
+            let getUrl = window.location;
+            let baseUrl = getUrl.protocol + "//" + getUrl.host;
+
+            xmlHttp.onreadystatechange = function () {
+                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
+                    window.location = `${baseUrl}/dashboard.php`;
+                }
+            };
+                
+            xmlHttp.open("post", `${baseUrl}/callback.php`);
+            xmlHttp.send(formData);
+        }
+
+        async function getUserDetails() {
+            const user = await sdk.me();
+            return user;
+        }
         
-        container.innerHTML = '<descope-wc project-id="' + projectId + '" flow-id="sign-up-or-in"></descope-wc>';
-        const wcElement = document.getElementsByTagName('descope-wc')[0]
+        const refreshToken = sdk.getRefreshToken();
+        const validRefreshToken = refreshToken && !sdk.isJwtExpired(refreshToken);
 
-        const onSuccess = (e) => {
-            sdk.refresh()
-            
+        if (validRefreshToken) {
+            console.log("Valid refresh token found. Logging in...");
+            sdk.refresh();
             const user = getUserDetails().then((user) => {
-                var formData = new FormData();
                 const sessionToken = sdk.getSessionToken();
+                sendFormData(sessionToken, user.data);
+            });
+        } else {
+            const container = document.getElementById("container")
+            container.innerHTML = '<descope-wc project-id="' + projectId + '" flow-id="sign-up-or-in"></descope-wc>';
+            const wcElement = document.getElementsByTagName('descope-wc')[0]
 
-                formData.append("sessionToken", sessionToken);
-                formData.append("projectId", e.target.getAttribute("project-id"));
-                formData.append("userDetails", JSON.stringify(user.data));
-
-                var xmlHttp = new XMLHttpRequest();
-                let getUrl = window.location;
-                let baseUrl = getUrl.protocol + "//" + getUrl.host;
-
-                xmlHttp.onreadystatechange = function () {
-                    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
-                        window.location = `${baseUrl}/dashboard.php`;
-                    }
-                };
+            const onSuccess = (e) => {
+                sdk.refresh()
                 
-                xmlHttp.open("post", `${baseUrl}/callback.php`);
-                xmlHttp.send(formData);
-            })
-
-            async function getUserDetails() {
-                const user = await sdk.me();
-                return user;
+                const user = getUserDetails().then((user) => {
+                    const sessionToken = sdk.getSessionToken();
+                    sendFormData(sessionToken, user.data);
+                });
             }
-        }
 
-        const onError = (err) => console.log(err);
+            const onError = (err) => console.log(err);
 
-        if (wcElement) {
-            wcElement.addEventListener('success', onSuccess)
-            wcElement.addEventListener('error', onError)
+            if (wcElement) {
+                wcElement.addEventListener('success', onSuccess)
+                wcElement.addEventListener('error', onError)
+            }
         }
     </script>
 </head>

diff --git a/sample/logout.php b/sample/logout.php
@@ -1,6 +1,25 @@
 <?php
 session_start();
 session_destroy();
+?>
 
-// Redirect back to home page
-header('Location: /index.php');
+<!DOCTYPE html>
+<html>
+<head>
+    <script src="https://unpkg.com/@descope/web-component@latest/dist/index.js"></script>
+    <script src="https://unpkg.com/@descope/web-js-sdk@latest/dist/index.umd.js"></script>
+    <script type="text/javascript" src="../static/descope.js"></script>
+</head>
+<body>
+    <script>
+        logout().then((resp) => {
+            // Redirect back to home page
+            window.location = "/index.php";
+        });
+
+        async function logout() {
+            const resp = await sdk.logout();
+        }
+    </script>
+</body>
+</html>
diff --git a/sample/styles.css b/sample/styles.css
@@ -0,0 +1,43 @@
+body {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+  background-color: #f2f2f2; /* Light grey background */
+}
+h1 {
+  margin-bottom: 30px;
+}
+.dashboard-button {
+  padding: 10px 20px;
+  font-size: 1.2em;
+  background-color: #008cba; /* Blue background */
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.dashboard-button:hover {
+  background-color: #007b9e; /* Darken background */
+}
+.container {
+  text-align: center;
+}
+.session-token-container {
+  background-color: #333;
+  color: #fff;
+  padding: 10px;
+  border-radius: 5px;
+  width: 80%;
+  word-wrap: break-word;
+  margin: 0 auto;
+}
+#container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+}