Login from code

apps/sensenet/cypress.json

@@ -7,7 +7,7 @@
     "identityServer": "https://is.demo.sensenet.com",
     "users": {
       "admin": {
-        "clientId": "businesscat",
+        "clientId": "KxkgOTAxLLCicUx7",
         "clientSecret": "",
         "id": "/Root/IMS/Public('businesscat')"
       },

apps/sensenet/cypress/support/commands.js

@@ -1,4 +1,6 @@
 import 'cypress-file-upload'
+import { codeLogin } from '@sensenet/authentication-oidc-react'
+
 // ***********************************************
 // This example commands.js shows you how to
 // create various custom commands and overwrite
@@ -35,34 +37,13 @@ Cypress.on('uncaught:exception', (err) => {
 
 Cypress.Commands.add('login', (userType = 'admin') => {
   const user = Cypress.env('users')[userType]
-
-  const configuration = {
-    client_id: user.clientId,
-    client_secret: Cypress.env(`secret_${userType}`) || user.clientSecret,
-    grant_type: 'client_credentials',
-    scope: encodeURIComponent('sensenet'),
-  }
-
-  const requestBody = Object.keys(configuration).reduce((acc, current, idx) => {
-    return `${acc}${current}=${configuration[current]}${idx === Object.keys(configuration).length - 1 ? '' : '&'}`
-  }, '')
-
-  cy.request({
-    url: `${Cypress.env('identityServer')}/connect/token`,
-    method: 'POST',
-    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body: requestBody,
-  }).then((resp) => {
-    const oidcUser = resp.body
-
-    oidcUser.profile = {
-      sub: user.id,
-    }
-
-    window.sessionStorage.setItem(
-      `oidc.user:${Cypress.env('identityServer')}:11V28Add7IaP1iFw`,
-      JSON.stringify(oidcUser),
-    )
+  codeLogin({
+    clientId: user.clientId,
+    clientSecret: Cypress.env(`secret_${userType}`) || user.clientSecret,
+    identityServerUrl: Cypress.env('identityServer'),
+    appId: '11V28Add7IaP1iFw',
+    userId: user.id,
+    fetchMethod: (url, options) => cy.request({ url, ...options }),
   })
 })
 

examples/sn-react-browser/.env

@@ -1,2 +1,4 @@
 SKIP_PREFLIGHT_CHECK=true
 FAST_REFRESH=false
+REACT_APP_CLIENT_ID=KxkgOTAxLLCicUx7
+REACT_APP_CLIENT_SECRET=

examples/sn-react-browser/src/components/app-providers.tsx

@@ -1,40 +1,35 @@
-import { AuthenticationProvider, useOidcAuthentication } from '@sensenet/authentication-oidc-react'
+import { codeLogin, CodeLoginResponse } from '@sensenet/authentication-oidc-react'
 import { Repository } from '@sensenet/client-core'
 import { RepositoryContext } from '@sensenet/hooks-react'
-import React, { PropsWithChildren } from 'react'
-import { BrowserRouter, useHistory } from 'react-router-dom'
+import React, { PropsWithChildren, useEffect, useState } from 'react'
+import { BrowserRouter } from 'react-router-dom'
 import { configuration, repositoryUrl } from '../configuration'
-import { LoginForm } from './login-form'
+import { FullScreenLoader } from './full-screen-loader'
 
 export function AppProviders({ children }: PropsWithChildren<{}>) {
   return (
     <BrowserRouter>
-      <AuthProvider>
-        <RepositoryProvider>{children}</RepositoryProvider>
-      </AuthProvider>
+      <RepositoryProvider>{children}</RepositoryProvider>
     </BrowserRouter>
   )
 }
 
-export const AuthProvider = ({ children }: PropsWithChildren<{}>) => {
-  const history = useHistory()
-
-  return (
-    <AuthenticationProvider configuration={configuration} history={history}>
-      {children}
-    </AuthenticationProvider>
-  )
-}
-
 export const RepositoryProvider = ({ children }: PropsWithChildren<{}>) => {
-  const { oidcUser } = useOidcAuthentication()
+  const [authData, setAuthData] = useState<CodeLoginResponse>()
+
+  useEffect(() => {
+    ;(async () => {
+      const response = await codeLogin(configuration)
+      setAuthData(response)
+    })()
+  }, [])
 
-  if (!oidcUser) {
-    return <LoginForm />
+  if (!authData) {
+    return <FullScreenLoader />
   }
 
   return (
-    <RepositoryContext.Provider value={new Repository({ repositoryUrl, token: oidcUser.access_token })}>
+    <RepositoryContext.Provider value={new Repository({ repositoryUrl, token: authData.access_token })}>
       {children}
     </RepositoryContext.Provider>
   )

examples/sn-react-browser/src/components/navbar.tsx

@@ -1,5 +1,4 @@
-import { useOidcAuthentication } from '@sensenet/authentication-oidc-react'
-import { AppBar, Button, Toolbar, Typography } from '@material-ui/core'
+import { AppBar, Toolbar, Typography } from '@material-ui/core'
 import { createStyles, makeStyles } from '@material-ui/core/styles'
 import React from 'react'
 
@@ -17,7 +16,6 @@ const useStyles = makeStyles(() =>
  * Navbar component
  */
 export const NavBarComponent: React.FunctionComponent = () => {
-  const { logout } = useOidcAuthentication()
   const classes = useStyles()
 
   return (
@@ -27,9 +25,6 @@ export const NavBarComponent: React.FunctionComponent = () => {
           <Typography variant="h6" className={classes.title}>
             Document Browser
           </Typography>
-          <Button color="inherit" onClick={logout}>
-            Log out
-          </Button>
         </Toolbar>
       </AppBar>
     </div>

examples/sn-react-browser/src/configuration.ts

@@ -1,14 +1,10 @@
-import { UserManagerSettings } from '@sensenet/authentication-oidc-react'
+import { CodeLoginParams } from '@sensenet/authentication-oidc-react'
 
-export const repositoryUrl = 'https://dev.demo.sensenet.com/'
+export const repositoryUrl = 'https://dev.demo.sensenet.com'
 
-export const configuration: UserManagerSettings = {
-  client_id: '7cYLChuhJxyGb7BS', //externalSPA clientId for dev.demo.sensenet.com
-  redirect_uri: `${window.location.origin}/authentication/callback`,
-  response_type: 'code',
-  post_logout_redirect_uri: `${window.location.origin}/`,
-  scope: 'openid profile sensenet',
-  authority: 'https://is.demo.sensenet.com/',
-  silent_redirect_uri: `${window.location.origin}/authentication/silent_callback`,
-  extraQueryParams: { snrepo: repositoryUrl },
+export const configuration: CodeLoginParams = {
+  clientId: process.env.REACT_APP_CLIENT_ID ?? '', // businesscat clientId for dev.demo.sensenet.com
+  clientSecret: process.env.REACT_APP_CLIENT_SECRET ?? '',
+  identityServerUrl: 'https://is.demo.sensenet.com',
+  appId: '7cYLChuhJxyGb7BS', //externalSPA clientId for dev.demo.sensenet.com
 }

examples/sn-react-calendar/.env

@@ -1,2 +1,4 @@
 SKIP_PREFLIGHT_CHECK=true
 FAST_REFRESH=false
+REACT_APP_CLIENT_ID=KxkgOTAxLLCicUx7
+REACT_APP_CLIENT_SECRET=

examples/sn-react-calendar/src/components/app-providers.tsx

@@ -1,40 +1,35 @@
-import { AuthenticationProvider, useOidcAuthentication } from '@sensenet/authentication-oidc-react'
+import { codeLogin, CodeLoginResponse } from '@sensenet/authentication-oidc-react'
 import { Repository } from '@sensenet/client-core'
 import { RepositoryContext } from '@sensenet/hooks-react'
-import React, { PropsWithChildren } from 'react'
-import { BrowserRouter, useHistory } from 'react-router-dom'
+import React, { PropsWithChildren, useEffect, useState } from 'react'
+import { BrowserRouter } from 'react-router-dom'
 import { configuration, repositoryUrl } from '../configuration'
-import { LoginForm } from './login-form'
+import { FullScreenLoader } from './full-screen-loader'
 
 export function AppProviders({ children }: PropsWithChildren<{}>) {
   return (
     <BrowserRouter>
-      <AuthProvider>
-        <RepositoryProvider>{children}</RepositoryProvider>
-      </AuthProvider>
+      <RepositoryProvider>{children}</RepositoryProvider>
     </BrowserRouter>
   )
 }
 
-export const AuthProvider = ({ children }: PropsWithChildren<{}>) => {
-  const history = useHistory()
-
-  return (
-    <AuthenticationProvider configuration={configuration} history={history}>
-      {children}
-    </AuthenticationProvider>
-  )
-}
-
 export const RepositoryProvider = ({ children }: PropsWithChildren<{}>) => {
-  const { oidcUser } = useOidcAuthentication()
+  const [authData, setAuthData] = useState<CodeLoginResponse>()
+
+  useEffect(() => {
+    ;(async () => {
+      const response = await codeLogin(configuration)
+      setAuthData(response)
+    })()
+  }, [])
 
-  if (!oidcUser) {
-    return <LoginForm />
+  if (!authData) {
+    return <FullScreenLoader />
   }
 
   return (
-    <RepositoryContext.Provider value={new Repository({ repositoryUrl, token: oidcUser.access_token })}>
+    <RepositoryContext.Provider value={new Repository({ repositoryUrl, token: authData.access_token })}>
       {children}
     </RepositoryContext.Provider>
   )

examples/sn-react-calendar/src/components/navbar.tsx

@@ -1,5 +1,4 @@
-import { useOidcAuthentication } from '@sensenet/authentication-oidc-react'
-import { AppBar, Button, Toolbar, Typography } from '@material-ui/core'
+import { AppBar, Toolbar, Typography } from '@material-ui/core'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import React from 'react'
 
@@ -17,7 +16,6 @@ const useStyles = makeStyles((theme: Theme) =>
  * Navbar component
  */
 export const NavBarComponent: React.FunctionComponent = () => {
-  const { logout } = useOidcAuthentication()
   const classes = useStyles()
 
   return (
@@ -27,9 +25,6 @@ export const NavBarComponent: React.FunctionComponent = () => {
           <Typography variant="h6" className={classes.title}>
             Calendar
           </Typography>
-          <Button color="inherit" onClick={logout}>
-            Log out
-          </Button>
         </Toolbar>
       </AppBar>
     </div>

examples/sn-react-calendar/src/configuration.ts

@@ -1,14 +1,10 @@
-import { UserManagerSettings } from '@sensenet/authentication-oidc-react'
+import { CodeLoginParams } from '@sensenet/authentication-oidc-react'
 
-export const repositoryUrl = 'https://dev.demo.sensenet.com/'
+export const repositoryUrl = 'https://dev.demo.sensenet.com'
 
-export const configuration: UserManagerSettings = {
-  client_id: '7cYLChuhJxyGb7BS', //externalSPA clientId for dev.demo.sensenet.com
-  redirect_uri: `${window.location.origin}/authentication/callback`,
-  response_type: 'code',
-  post_logout_redirect_uri: `${window.location.origin}/`,
-  scope: 'openid profile sensenet',
-  authority: 'https://is.demo.sensenet.com/',
-  silent_redirect_uri: `${window.location.origin}/authentication/silent_callback`,
-  extraQueryParams: { snrepo: repositoryUrl },
+export const configuration: CodeLoginParams = {
+  clientId: process.env.REACT_APP_CLIENT_ID ?? '', // businesscat clientId for dev.demo.sensenet.com
+  clientSecret: process.env.REACT_APP_CLIENT_SECRET ?? '',
+  identityServerUrl: 'https://is.demo.sensenet.com',
+  appId: '7cYLChuhJxyGb7BS', //externalSPA clientId for dev.demo.sensenet.com
 }

examples/sn-react-imagegallery/.env

@@ -1,2 +1,4 @@
 SKIP_PREFLIGHT_CHECK=true
 FAST_REFRESH=false
+REACT_APP_CLIENT_ID=KxkgOTAxLLCicUx7
+REACT_APP_CLIENT_SECRET=