authscape 1.0.0 → 1.0.2

package/components/Datatable.js

@@ -0,0 +1,118 @@
+import React, { Component } from 'react';
+import apiService from '../services/apiService';
+import DataTable, {createTheme} from "react-data-table-component";
+
+export default class Datatable extends Component {
+
+    static defaultProps = {
+        options: {}
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            pageNumber : 1,
+            pageLength : props.pageLength ? props.pageLength : 10,
+            data: [],
+            loading: false,
+            totalRows: 0
+        };
+    }
+
+    componentDidMount = async () => {
+        await this.GetDataFromUrl(this.state.pageNumber, this.state.pageLength, this.props.params);
+        createTheme('dataTable', {
+            text:{
+
+            }
+        })
+    }
+
+    reload = async (reset = false) => {
+      
+        if (reset === true)
+        {
+            this.setState({pageNumber: 1}, async () => {
+                await this.GetDataFromUrl(this.state.pageNumber, this.state.pageLength, this.props.params);
+            })
+        }
+        else
+        {
+            await this.GetDataFromUrl(this.state.pageNumber, this.state.pageLength, this.props.params);
+        }
+
+       
+    }
+
+    GetDataFromUrl = (page, length, postData = {}) => {
+
+        this.setState({
+            loading: true
+        }, async function () {
+
+            let data = postData;
+
+            data.offset = page;
+            data.length = length;
+
+            let response = null;
+            if (this.props.methodType == "get")
+            {
+                response = await apiService().get(this.props.url);
+            }
+            else
+            {
+                response = await apiService().post(this.props.url, postData);
+            }
+            
+            if (response != null && response.status === 200)
+            {
+                if (this.props.returnResult != null)
+                {
+                    this.props.returnResult(response.data.data);
+                }
+
+                this.setState({
+                    totalRows: response.data.recordsTotal,
+                    data: response.data.data,
+                    loading: false
+                });
+            }
+            else
+            {
+                //console.error(response.status + " - " + response.data);
+            }
+
+        });
+        
+    }
+
+    handlePageChange = async page => {
+        const { pageLength } = this.state;
+        this.setState({pageNumber: page});
+        await this.GetDataFromUrl(page, pageLength, this.props.params);
+    };
+
+    render() {
+
+        return (
+        <div>
+                <DataTable
+                    title={this.props.title}
+                    columns={this.props.columns}
+                    data={this.state.data}
+                    paginationRowsPerPageOptions={this.props.pageLength ? [this.props.pageLength] : [10]}
+                    progressPending={this.state.loading}
+                    customStyles={this.props.customStyles}
+                    paginationPerPage={this.props.pageLength ? this.props.pageLength : 10}
+                    paginationServer
+                    pagination
+                    paginationTotalRows={this.state.totalRows}
+                    // onChangeRowsPerPage={this.handlePerRowsChange}
+                    onChangePage={this.handlePageChange}
+                    noDataComponent={this.props.noDataComponent}
+                />
+        </div>);
+    }
+}

package/components/modals/confirmationModal.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+
+export default function confirmationModal({title, description, cancelClicked, okClicked, open = false, cancelTitle = "Cancel", okTitle = "OK"}) {
+    return (
+        <Dialog
+            open={open}
+            onClose={cancelClicked}
+            aria-labelledby="alert-dialog-title"
+            aria-describedby="alert-dialog-description">
+            <DialogTitle id="alert-dialog-title">
+                {title}
+            </DialogTitle>
+            <DialogContent>
+            <DialogContentText id="alert-dialog-description">
+                {description}
+            </DialogContentText>
+            </DialogContent>
+            <DialogActions>
+            <Button onClick={cancelClicked}>{cancelTitle}</Button>
+            <Button onClick={okClicked}>
+                {okTitle}
+            </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}

package/components/modals/paymentModal.js

@@ -0,0 +1,254 @@
+import React, {useEffect, useState} from 'react';
+import {Elements} from '@stripe/react-stripe-js';
+import {loadStripe} from '@stripe/stripe-js';
+import Box from '@material-ui/core/Box';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import CheckoutForm from '../pricing/CheckoutForm';
+import ApiService from '../../services/apiService';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import Typography from '@mui/material/Typography';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import PaymentRoundedIcon from '@mui/icons-material/PaymentRounded';
+import apiService from '../../services/apiService';
+import Grid from '@mui/material/Grid';
+
+export default function PaymentModal({title, description, amount, priceId, setIsLoading, isOpen, invoiceId, onModalClose}) {
+
+    const stripePromise = loadStripe(process.env.stripePublicKey);
+    const [options, setOptions] = useState(null);
+    const [value, setValue] = React.useState(0);
+    const [paymentMethods, setPaymentMethods] = React.useState([]);
+    const [paymentMethod, setPaymentMethod] = React.useState(null);
+
+    useEffect(async () => {
+
+        if (isOpen)
+        {
+            let response = await ApiService().post("/StripePayment/ConnectCustomer", {
+                paymentRequestType: 3,
+                amount: amount,
+                priceId: priceId
+            });
+
+            setOptions({
+                clientSecret: response.data,
+            });
+
+            let responsePayments = await ApiService().get("/NCAInvoices/GetPaymentMethods");
+            if (responsePayments != null && responsePayments.status == 200)
+            {
+                setPaymentMethods(responsePayments.data);
+            }
+        }
+
+    }, [isOpen]);
+
+    const handleChange = (event, newValue) => {
+        setValue(newValue);
+    };
+
+    function a11yProps(index) {
+        return {
+          id: `simple-tab-${index}`,
+          'aria-controls': `simple-tabpanel-${index}`,
+        };
+    }
+
+    const PaymentMethod = ({id, last4, clicked}) => {
+        return (
+            <>
+            <Box fullWidth={true} sx={{height: 160, width:"100%", marginTop:2, backgroundColor:"#2196F3", position:"relative", border: "1px solid #2196F3", borderRadius: 1, display:"flex", flexDirection:"column", justifyContent:"center", textAlign:"center", cursor:"pointer"}}
+                onClick={() => {
+                    clicked(id);
+                }}>
+                <Typography gutterBottom variant="body" component="div" sx={{fontSize:14, position:"absolute", left:15, top:10, color:"white"}}>
+                    Visa
+                </Typography>
+                {/* <Box sx={{position:"absolute", top:10, right:10, color:"#e9e9e9"}}>
+                    <DeleteRoundedIcon onClick={deleteClicked} />
+                </Box> */}
+                <Typography gutterBottom variant="body" component="div" sx={{verticalAlign:"middle", fontSize:18, color:"white"}}>
+                    * * * * &nbsp; * * * * &nbsp; * * * * &nbsp; {last4}
+                </Typography>
+
+                <Grid container spacing={1} sx={{position:"absolute", bottom:8, marginLeft:0, width: "100%"}}>
+                    <Grid item xs={6} sx={{paddingLeft:2}}>
+                        <Typography gutterBottom variant="body" component="div" sx={{textAlign:"left", fontSize:12, marginTop:1, paddingLeft:1, color:"#e9e9e9"}}>
+                            CARD HOLDER
+                        </Typography>
+
+                        <Typography gutterBottom variant="body" component="div" sx={{textAlign:"left", fontSize:12, marginTop:"-9px", paddingLeft:1, color:"white" }}>
+                            Brandon Zuech
+                        </Typography>
+                    </Grid>
+                    <Grid item xs={6} sx={{textAlign:"right", paddingRight:2}}>
+                        <Typography gutterBottom variant="body" component="div" sx={{fontSize:12, marginLeft:2, marginTop:1, color:"#e9e9e9"}}>
+                            EXPIRES
+                        </Typography>
+
+                        <Typography gutterBottom variant="body" component="div" sx={{fontSize:12, marginLeft:2, marginTop:"-9px", color:"white"}}>
+                            08/21
+                        </Typography>
+                    </Grid>
+                </Grid>
+            </Box>
+            </>
+        );
+    };
+
+    function TabPanel(props) {
+        const { children, value, index, ...other } = props;
+      
+        return (
+          <div
+            role="tabpanel"
+            hidden={value !== index}
+            id={`simple-tabpanel-${index}`}
+            aria-labelledby={`simple-tab-${index}`}
+            {...other}
+          >
+            {value === index && (
+              <Box sx={{ p: 3 }}>
+                <Typography>{children}</Typography>
+              </Box>
+            )}
+          </div>
+        );
+    }
+
+    return (
+        <>
+            <Dialog
+                fullWidth={true}
+                maxWidth={"sm"}
+                open={isOpen}
+                onClose={() => onModalClose()}>
+                <DialogTitle>{title}
+                
+                    <IconButton
+                        aria-label="close"
+                        onClick={() => {
+                            
+                            onModalClose();
+                        }}
+                        sx={{
+                            position: 'absolute',
+                            right: 8,
+                            top: 8,
+                            color: (theme) => theme.palette.grey[500],
+                        }}>
+                        <CloseIcon />
+                    </IconButton>
+                </DialogTitle>
+                <DialogContent>
+                    {description}
+
+                    <Box sx={{ width: '100%' }}>
+                        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+                            <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
+                            <Tab label="Existing Payment Method" {...a11yProps(0)} />
+                            <Tab label="Add Payment Method" {...a11yProps(1)} />
+                            </Tabs>
+                        </Box>
+                        <TabPanel value={value} index={0}>
+                            
+                            <Select
+                                sx={{marginTop:4}}
+                                fullWidth={true}
+                                //placeholder={"Select a payment type"}
+                                //labelId="demo-simple-select-label"
+                                id="demo-simple-select"
+                                value={paymentMethod}
+                                //label="Payment Type"
+                                onChange={(val) => {
+                                    setPaymentMethod(val.target.value);
+                                }}>
+                                    {paymentMethods != null && paymentMethods.map((paymentMethod) => {
+                                        return (
+                                        <MenuItem value={paymentMethod.id} fullWidth={true} sx={{width:"100%"}}>
+
+                                            
+
+                                            <PaymentMethod id={paymentMethod.id} last4={paymentMethod.last4} clicked={() => {
+
+                                            }} />
+
+
+                                            {/* <Box elevation={0} sx={{backgroundColor:"white"}}>
+                                                <Stack direction="row" spacing={2}>
+                                                    <Box sx={{paddingTop:2}}>
+                                                        <img
+                                                            style={{marginTop:"9px"}}
+                                                                loading="lazy"
+                                                                width="50"
+                                                                src={'/images/cardType/' + paymentMethod.brand + ".png"}
+                                                                srcSet={'/images/cardType/' + paymentMethod.brand + ".png"}
+                                                        />
+                                                    </Box>
+                                                    <Box>
+                                                        <Box>
+                                                            {paymentMethod.funding.toUpperCase()}
+                                                        </Box>
+                                                        <Box>
+                                                            **** **** <small>{paymentMethod.last4}</small> &nbsp; <small>Expire: ({paymentMethod.expMonth}/{paymentMethod.expYear})</small>
+                                                        </Box>
+                                                    </Box>
+                                                </Stack>
+                                            </Box> */}
+                                            
+                                        </MenuItem>)
+                                    })}
+                            </Select>
+
+                            <Button startIcon={<PaymentRoundedIcon/>} type="submit" variant="contained" disabled={paymentMethod == null} sx={{marginTop:2}} onClick={async () => {
+
+                                setIsLoading(true);
+                                let response = await apiService().post("/NCAInvoices/PayInvoice", {
+                                    InvoiceId: invoiceId,
+                                    WalletId: paymentMethod
+                                });
+                                setIsLoading(false);
+
+                                if (response != null && response.status == 200)
+                                {
+                                    window.location.reload();
+                                }
+                                else
+                                {
+                                    alert("We had an issue with the payment method");
+                                }
+                                
+
+                            }}>Pay Now</Button>
+
+                        </TabPanel>
+                        <TabPanel value={value} index={1}>
+                            <div>
+                                <Box mt={4} mb={2}>
+                                    {options != null &&
+                                        <Elements stripe={stripePromise} options={options}>
+                                            <CheckoutForm />
+                                        </Elements>
+                                    }
+                                </Box>
+                            </div>
+                        </TabPanel>
+                    </Box>
+
+                </DialogContent>
+                <DialogActions>
+                {/* <Button onClick={handleClose}>Close</Button> */}
+                </DialogActions>
+            </Dialog>
+        </>
+    )
+}

package/components/pricing/checkoutForm.js

@@ -0,0 +1,55 @@
+import React, {useState} from 'react';
+import Button from '@mui/material/Button';
+import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js';
+import PaymentRoundedIcon from '@mui/icons-material/PaymentRounded';
+
+const CheckoutForm = () => {
+  const stripe = useStripe();
+  const elements = useElements();
+
+  const [errorMessage, setErrorMessage] = useState(null);
+
+  const handleSubmit = async (event) => {
+
+    // We don't want to let default form submission happen here,
+    // which would refresh the page.
+    event.preventDefault();
+
+    if (!stripe || !elements) {
+      // Stripe.js has not yet loaded.
+      // Make sure to disable form submission until Stripe.js has loaded.
+      return;
+    }
+
+    const {error} = await stripe.confirmPayment({
+      //`Elements` instance that was used to create the Payment Element
+      elements,
+      confirmParams: {
+        return_url: process.env.WebsiteBaseUri + '/confirmPayment?redirectUrl=' + encodeURIComponent(window.location.href),
+      },
+    });
+
+    if (error) {
+      // This point will only be reached if there is an immediate error when
+      // confirming the payment. Show error to your customer (for example, payment
+      // details incomplete)
+      setErrorMessage(error.message);
+    } else {
+      // Your customer will be redirected to your `return_url`. For some payment
+      // methods like iDEAL, your customer will be redirected to an intermediate
+      // site first to authorize the payment, then redirected to the `return_url`.
+
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <PaymentElement />
+      <Button startIcon={<PaymentRoundedIcon/>} type="submit" variant="contained" disabled={!stripe} sx={{marginTop:2}}>Pay Now</Button>
+      {/* Show error message to your customers */}
+      {errorMessage && <div>{errorMessage}</div>}
+    </form>
+  )
+};
+
+export default CheckoutForm;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "authscape",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -10,10 +10,13 @@
   "license": "ISC",
   "dependencies": {
     "axios": "^0.27.2",
+    "js-file-download": "^0.4.12",
     "next": "^12.1.6",
+    "next-cookies": "^2.0.3",
     "nookies": "^2.5.2",
     "querystring": "^0.2.1",
     "react": "^18.2.0",
+    "react-data-table-component": "^7.5.2",
     "react-dom": "^18.2.0"
   }
 }

package/services/BaseUri.js

@@ -0,0 +1,3 @@
+export function GetEnvironment() {
+    return process.env.STAGE;
+}

package/services/apiService.js

@@ -0,0 +1,304 @@
+import axios from 'axios'
+import querystring from 'querystring';
+import fileDownload from 'js-file-download';
+import cookies from 'next-cookies';
+import { parseCookies, setCookie, destroyCookie } from 'nookies';
+import { GetEnvironment } from "./BaseUri";
+
+const setupDefaultOptions = async (ctx = null) => {
+
+    let defaultOptions = {};
+    
+    if (ctx == null)
+    {
+        let accessToken = cookies(ctx).access_token || '';
+
+        // let accessToken = window.localStorage.getItem("access_token");
+
+        if (accessToken !== null && accessToken !== undefined && accessToken != "") {
+            defaultOptions = {
+                headers: {
+                    Authorization: "Bearer " + accessToken
+                }
+            };
+        }
+        else {
+            defaultOptions = {
+                headers: {
+                },
+            };
+        }
+    }
+    else
+    {
+        defaultOptions = {
+            headers: {
+            },
+        };
+    }
+
+    return defaultOptions;
+}
+
+const RefreshToken = async (originalRequest, instance) => {
+
+    let accessToken = cookies(null).access_token || '';
+    let refreshToken = cookies(null).refresh_token || '';
+
+    let response = await instance.post(process.env.AUTHORITYURI + "/connect/token",
+        querystring.stringify({
+            grant_type: 'refresh_token',
+            client_id: process.env.client_id,
+            client_secret: process.env.client_secret,
+            refresh_token: refreshToken
+        }), {
+        headers: {
+            "Content-Type": "application/x-www-form-urlencoded",
+            "Authorization": "Bearer " + accessToken
+        }
+    });
+
+    if (response != null && response.status == 200)
+    {
+        originalRequest.headers['Authorization'] = 'Bearer ' + response.data.access_token;
+
+        let domain = getCookieDomain();
+
+        await setCookie(null, "access_token", response.data.access_token,
+        {
+            maxAge: 2147483647,
+            path: '/',
+            domain: domain,
+            secure: true
+        });
+    
+        await setCookie(null, "expires_in", response.data.expires_in,
+        {
+            maxAge: 2147483647,
+            path: '/',
+            domain: domain,
+            secure: true
+        });
+    
+        await setCookie(null, "refresh_token", response.data.refresh_token,
+        {
+            maxAge: 2147483647,
+            path: '/',
+            domain: domain,
+            secure: true
+        });
+    }
+}
+
+const apiService = (ctx = null) => {
+
+    let env = GetEnvironment();
+    if (env == "development")
+    {
+        process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
+    }
+
+    let baseUri = process.env.APIURI + "/api";
+    let AuthUri = process.env.AUTHORITYURI;
+
+    const instance = axios.create({
+        baseURL: baseUri,
+        //timeout: 10000,
+        params: {} // do not remove this, its added to add params later in the config
+    });
+
+    instance.interceptors.response.use(
+        (response) => {
+        
+        return response;
+        },
+        async (error) => {
+            const originalConfig = error.config;
+            if (error.response) {
+
+                if (error.response.status === 401 && !originalConfig._retry) {
+                    originalConfig._retry = true;
+            
+                    // Do something, call refreshToken() request for example;
+                    await RefreshToken(originalConfig, instance);
+
+                    // return a request
+                    return instance.request(originalConfig);
+                }
+
+                if (error.response.status === 400) {
+                    // Do something 
+
+                    if (error.response.config.url.includes("/connect/token")) // remove the access and refresh if invalid
+                    {
+                        destroyCookie(ctx, "access_token", {
+                            maxAge: 2147483647,
+                            path: '/',
+                            domain: process.env.cookieDomain
+                        });
+
+                        destroyCookie(ctx, "refresh_token", {
+                            maxAge: 2147483647,
+                            path: '/',
+                            domain: process.env.cookieDomain
+                        });
+
+                        destroyCookie(ctx, "expires_in", {
+                            maxAge: 2147483647,
+                            path: '/',
+                            domain: process.env.cookieDomain
+                        });
+                    }
+
+                    return Promise.reject(error);
+                }
+            }
+        
+            return Promise.reject(error);
+        }
+    );
+
+    return {
+
+        get: async (url, options= {}) => {
+            
+            try
+            {
+                let defaultOptions = await setupDefaultOptions(ctx);
+                return await instance.get(url, { ...defaultOptions, ...options });
+            }
+            catch(error)
+            {
+                return error.response;
+            }
+        },
+        post: async (url, data, options = {}) => {
+
+            try
+            {
+                let defaultOptions = await setupDefaultOptions(ctx);
+                return await instance.post(url, data, { ...defaultOptions, ...options });
+            }
+            catch(error)
+            {
+                return error.response;
+            }
+        },
+        put: async (url, data, options = {}) => {
+
+            try
+            {
+                let defaultOptions = await setupDefaultOptions(ctx);
+                return await instance.put(url, data, { ...defaultOptions, ...options });
+            }
+            catch(error)
+            {
+                return error.response;
+            }
+        },
+        delete: async (url, options = {}) => {
+
+            try
+            {
+                let defaultOptions = await setupDefaultOptions(ctx);
+                return await instance.delete(url, { ...defaultOptions, ...options });
+            }
+            catch(error)
+            {
+                return error.response;
+            }
+        },
+        login: async () => {
+
+            await signinRedirect(ctx);
+        },
+        logout: async () => {
+
+            let cookieDomain = process.env.cookieDomain;
+
+            destroyCookie(ctx, "access_token", {
+                maxAge: 2147483647,
+                path: '/',
+                domain: cookieDomain
+            });
+
+            destroyCookie(ctx, "refresh_token", {
+                maxAge: 2147483647,
+                path: '/',
+                domain: cookieDomain
+            });
+
+            destroyCookie(ctx, "expires_in", {
+                maxAge: 2147483647,
+                path: '/',
+                domain: cookieDomain
+            });
+
+            setTimeout(() => {
+                window.location.href = AuthUri + "/connect/logout?redirect=" + window.location.href;
+            }, 500);
+
+        },
+        signUp: (redirectUrl = null) => {
+
+            let url = "";
+            if (redirectUrl == null)
+            {
+                url = AuthUri + "/Account/Register?redirectUrl=" + window.location.href;
+                localStorage.setItem("redirectUri", window.location.href);
+            }
+            else
+            {
+                url = AuthUri + "/Account/Register?redirectUrl=" + redirectUrl;
+                localStorage.setItem("redirectUri", redirectUrl);
+            }
+
+            window.location.href = url;
+        },
+        GetCurrentUser: async () => {
+
+            try
+            {
+                let accessToken = cookies(ctx).access_token || null;
+                if (accessToken)
+                {
+                    let defaultOptions = await setupDefaultOptions(ctx);
+                    const response = await instance.get('/UserManagement', defaultOptions);
+                    if (response != null && response.status == 200)
+                    {
+                        return response.data;
+                    }
+                }
+
+            } catch(exp) {
+                //return -1;
+            }
+            return null;    
+        },
+        DownloadFile: async (url, fileName, completed) => {
+         
+            try
+            {
+                //let defaultOptions = await setupDefaultOptions();
+                let defaultOptions = {};
+                let options = { responseType: "blob" };
+                let response = await instance.get(url, { ...defaultOptions, ...options });
+                if (response.status === 200) {
+                    fileDownload(response.data, fileName);
+                    if (completed !== undefined) {
+                        completed();
+                    }
+                }
+            }
+            catch(error)
+            {
+                console.error(error);
+                if (completed !== undefined) {
+                    completed();
+                }
+            }
+        }
+    }
+}
+
+export default apiService;

package/services/authService.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import axios from 'axios';
+import querystring from 'querystring';
+
+const authService = () => {
+
+    return {
+
+        dec2hex: (dec) => {
+            return ('0' + dec.toString(16)).substr(-2)
+        },
+        generateRandomString: () => {
+            var array = new Uint32Array(56/2);
+            window.crypto.getRandomValues(array);
+            return Array.from(array, authService().dec2hex).join('');
+        },
+        sha256: (plain) => {
+            const encoder = new TextEncoder();
+            const data = encoder.encode(plain);
+            return window.crypto.subtle.digest('SHA-256', data);
+        },
+        base64urlencode: (a) => {
+            var str = "";
+            var bytes = new Uint8Array(a);
+            var len = bytes.byteLength;
+            for (var i = 0; i < len; i++) {
+            str += String.fromCharCode(bytes[i]);
+            }
+            return btoa(str)
+            .replace(/\+/g, "-")
+            .replace(/\//g, "_")
+            .replace(/=+$/, "");
+        },
+        challenge_from_verifier: async (v) => {
+            let hashed = await authService().sha256(v);
+            let base64encoded = authService().base64urlencode(hashed);
+            return base64encoded;
+        },
+        login: async (redirectUserUri = null, dnsRecord = null, deviceId = null) => {
+
+            let state = "1234";
+            if (redirectUserUri != null)
+            {
+                localStorage.setItem("redirectUri", redirectUserUri);
+            }
+
+            let verifier = authService().generateRandomString();
+            var challenge = await authService().challenge_from_verifier(verifier);
+
+            window.localStorage.setItem("verifier", verifier);
+
+            let redirectUri = window.location.origin + "/signin-oidc";
+            let loginUri = process.env.AUTHORITYURI + "/connect/authorize?response_type=code&state=" + state + "&client_id=" + process.env.client_id + "&scope=email%20openid%20offline_access%20profile%20api1&redirect_uri=" + redirectUri + "&code_challenge=" + challenge + "&code_challenge_method=S256";
+            
+            if (deviceId)
+            {
+                loginUri += "&deviceId=" + deviceId; // will be for chrome extention and mobile apps later
+            }
+            
+            window.location.href = loginUri;
+        }
+    }
+}
+
+export default authService;

package/services/authorizationComponent.js

@@ -0,0 +1,37 @@
+import React, { useEffect, useState, useRef } from 'react';
+import apiService from '../services/apiService';
+
+export default function AuthorizationComponent({children, setCurrentUser, userLoaded}) {
+
+    const [loaded, setLoaded] = useState(false);
+
+    useEffect(async () => {
+
+        if (!loaded)
+        {
+            setLoaded(true);
+
+            let usr = await apiService().GetCurrentUser();
+            if (usr != null)
+            {
+              setCurrentUser(usr);
+            }
+            else
+            {
+              setCurrentUser(null);
+            }
+
+            userLoaded();
+        }
+
+    }, [loaded]);
+
+    return (
+      <>
+    <div>
+      {children}
+    </div>
+
+    </>
+  )
+}

package/services/slug.js

@@ -0,0 +1,13 @@
+const Slug = (slug) => {
+
+    let index = slug.lastIndexOf("-") + 1;
+    if (slug.length > index)
+    {
+        slug = slug.substr(index);
+        return slug;
+    }
+
+    return null;
+};
+
+export default Slug;

package/services/storeWithExpiry.js

@@ -0,0 +1,30 @@
+const storeWithExpiry = () => {
+
+    return {
+        set: (key, value, ttl) => {
+
+            const now = new Date()
+            const item = {
+                value: value,
+                expiry: now.getTime() + ttl,
+            }
+            localStorage.setItem(key, JSON.stringify(item))
+        },
+        get: (key) => {
+
+            const itemStr = localStorage.getItem(key)
+            if (!itemStr) {
+                return null
+            }
+            const item = JSON.parse(itemStr)
+            const now = new Date()
+            if (now.getTime() > item.expiry) {
+                localStorage.removeItem(key)
+                return null
+            }
+            return item.value
+        }
+    }
+}
+
+export default storeWithExpiry;