User signup

[SANTHILADATABOT]

We are successfully installed web connectycube sample project. Video chat worked with default users only. How can we add dynamic users.

How can i use User signup javascript code.

Link

https://developers.connectycube.com/js/authentication-and-users?id=user-signup

This is the code

const userProfile = { login: "xxxxxxx", password: "xxxxxxx" };

// JS SDK v1 ConnectyCube.users.signup(userProfile, (error, user) => {});

// JS SDK v2 ConnectyCube.users .signup(userProfile) .then((user) => {}) .catch((error) => {});

[ccvlad]

Hi, @SANTHILADATABOT

Via this code you are able to create user and log-in (sign-up). It will be helpful for auth screen where input fields (login/email and password for new user registration) are present.

We have used the signup method in the Chat Sample code here - https://github.com/ConnectyCube/connectycube-web-samples/blob/master/chat/src/services/auth-service.js#L41

[ccvlad]

For the Video Chat Sample we have used static users, that hardcoded in the config file. This users were created via the admin panel. This was made to simplify the Video Chat Sample code (to avoid authorisation and users' search before select for video/audio call)

[SANTHILADATABOT]

Hi, @SANTHILADATABOT

Via this code you are able to create user and log-in (sign-up). It will be helpful for auth screen where input fields (login/email and password for new user registration) are present.

We have used the signup method in the Chat Sample code here - https://github.com/ConnectyCube/connectycube-web-samples/blob/master/chat/src/services/auth-service.js#L41

We have used this code with user signup parameters. the code ran without any errors. i am not sure whether the data is inserted. i can not see it in the https://admin.connectycube.com/ user list also. let me know where to check whether its working or not.

[SANTHILADATABOT]

we have an existing system which has existing login data, we want to use the data from this existing application and make them involve in video chat. we already tried https://developers.connectycube.com/guides/custom-identity-provider we still could not pass our users into connectycube

[ccvlad]

Are you want to create user via ConnectyCube or via Custom identity provider? Please describe what you expect to clarify the issue?

[SANTHILADATABOT]

We want to create user via Custom identity provider. We are already tried https://developers.connectycube.com/guides/custom-identity-provider but we still could not pass our users into connectycube

[SANTHILADATABOT]

Exactly we need to store our users data into connectycube database and based on that we need to do video chat

[ccvlad]

You do not need to use signup method. From the guide:

POST https://api.connectycube.com/login
login=IP_user_id
password=IP_token

• create a ConnectyCube session w/o user (empty session)
• use the ConnectyCube.login method to upgrade the current session

[SANTHILADATABOT]

We are used that ConnectyCube session and ConnectyCube.login in src/auth-service.js file. we did not get any solution. so please give step by step process for need to store our users data into connectycube database

[SANTHILADATABOT]

Thanks for your valuable comments. But we still could not get any proper results for video chat user authentication from our Database.

In that, as per instructions first we added the ConnectyCube session code and ConnectyCube.login method in auth-service.js file but we did not get any results

then we added the ConnectyCube session code and ConnectyCube.login method in config.js file but we did not get any solution.

At the same time we are not aware where to put the ConnectyCube session code and ConnectyCube.login and how to use it.

Existing auth-service.js File

import ConnectyCube from "connectycube"; import { credentials, appConfig } from "./config";

class AuthService { $loginScreen = document.getElementById("login"); $callScreen = document.getElementById("call"); $loader = document.getElementById("login-loader"); $caption = document.getElementById("login-caption");

init = () => ConnectyCube.init(credentials, appConfig);

login = user => { return new Promise((resolve, reject) => { this.$loader.classList.remove("hidden"); this.$caption.classList.add("hidden");

  ConnectyCube.createSession(user)
    .then(() => ConnectyCube.chat.connect({ userId: user.id, password: user.password }))
    .then(() => {
      this.$loginScreen.classList.add("hidden");
      this.$callScreen.classList.remove("hidden");
      this.$loader.classList.add("hidden");
      this.$caption.classList.remove("hidden");
      resolve();
    })
    .catch(reject);
});

};

logout = () => { ConnectyCube.chat.disconnect(); ConnectyCube.destroySession();

this.$callScreen.classList.add("hidden");
this.$loginScreen.classList.remove("hidden");

}; }

// create instance const Auth = new AuthService(); // lock instance Object.freeze(Auth);

export default Auth;

Modified auth-service.js file

import ConnectyCube from 'connectycube' import { credentials, appConfig } from "./config"; import User from '../models/user' import store from '../store' import { setCurrentUser } from '../actions/currentUser' import { getImageLinkFromUID } from '../helpers/file' import { LogOut } from '../reducers/index'

class AuthService { static CURRENT_USER_SESSION_KEY = 'CURRENT_USER_SESSION_KEY' static DEVICE_TOKEN_KEY = 'DEVICE_TOKEN_KEY'

async init() { await ConnectyCube.init(...appConfig.connectyCubeConfig) return this.autologin() }

async autologin() { const checkUserSessionFromStore = await this.getUserSession() if (checkUserSessionFromStore) { const data = JSON.parse(checkUserSessionFromStore) await this.signIn({ login: data.login, password: data.password }) return 'home' } else { return 'auth' } }

async signIn(params) { const session = await ConnectyCube.createSession(params) const currentUser = new User(session.user) session.user.avatar = getImageLinkFromUID(session.user.avatar) // work around session.user.full_name = session.user.login store.dispatch(setCurrentUser(session)) const customSession = Object.assign({}, currentUser, { password: params.password }) this.setUserSession(customSession) this.connect(customSession.id, customSession.password) }

////////////////////////////////////////////// params = { login: "marvin18", password: "supersecurepwd" }; //////////////////////////////////////////////

async signUp(params) { await ConnectyCube.createSession() await ConnectyCube.users.signup(params) return this.signIn(params) }

async connect(userId, password) { await ConnectyCube.chat.connect({ userId, password }) }

setUserSession(userSession) { return localStorage.setItem(AuthService.CURRENT_USER_SESSION_KEY, JSON.stringify(userSession)) }

getUserSession() { return localStorage.getItem(AuthService.CURRENT_USER_SESSION_KEY) }

async logout() { localStorage.clear() await ConnectyCube.logout() store.dispatch(LogOut()) }

}

const authService = new AuthService()

Object.freeze(authService)

export default authService

Existing config.js file

export const messages = { login: "Login as any user on this computer and another user on another computer.", create_session: "Creating a session...", connect: "Connecting...", connect_error: "Something went wrong with the connection. Check internet connection or user info and try again.", login_as: "Logged in as ", title_login: "Choose a user to login with:", title_callee: "Choose users to call:", calling: "Calling...", webrtc_not_avaible: "WebRTC is not available in your browser", no_internet: "Please check your Internet connection and try again" };

export const credentials = { appId: xxxxx, authKey: "xxxxxxxxxxxx", authSecret: "xxxxxxxxx" };

export const appConfig = { debug: { mode: 1 } // videocalling: { // answerTimeInterval: 30, // dialingTimeInterval: 5, // disconnectTimeInterval: 35, // statsReportTimeInterval: 5 // } };

export const users = [ { id: 1388425, name: "xxxxx", login: "xxxxxx", password: "xxxxxxx", color: "#34ad86" }, { id: 1388433, name: "yyyyyy", login: "yyyyyy", password: "yyyyyyy", color: "#077988" }, ];

Modified config.js file

export const messages = { login: "Login as any user on this computer and another user on another computer.", create_session: "Creating a session...", connect: "Connecting...", connect_error: "Something went wrong with the connection. Check internet connection or user info and try again.", login_as: "Logged in as ", title_login: "Choose a user to login with:", title_callee: "Choose users to call:", calling: "Calling...", webrtc_not_avaible: "WebRTC is not available in your browser", no_internet: "Please check your Internet connection and try again" };

export const credentials = { appId: xxxxx, authKey: "xxxxxxxxxxxx", authSecret: "xxxxxxxxx" };

export const appConfig = { debug: { mode: 1 } // videocalling: { // answerTimeInterval: 30, // dialingTimeInterval: 5, // disconnectTimeInterval: 35, // statsReportTimeInterval: 5 // } };

      const userProfile = {
      login: "marvin18",
      password: "supersecurepwd"
    };

    // JS SDK v1
    //ConnectyCube.users.signup(userProfile, (error, user) => {});

    // JS SDK v2
    ConnectyCube.users
      .signup(userProfile)
      .then((user) => {log.console('success');})
      .catch((error) => {});

export const users = [ { id: 1388425, name: "xxxxx", login: "xxxxxx", password: "xxxxxxx", color: "#34ad86" }, { id: 1388433, name: "yyyyyy", login: "yyyyyy", password: "yyyyyyy", color: "#077988" },

];

So can you help us with a step by step working process in connectycube. And also exactly we need to store our users data into connectycube database and based on that we need to do video chat. Pls let us know thanks

[ccvlad]

Try this:

• create session - const cubeSession = await ConnectyCube.createSession()
• make auth to your BE and obtain IP_user_id and IP_token
• do login const user = ConnectyCube.login({login: IP_user_id, password: IP_user_id})

Show your logs for more information.

[SANTHILADATABOT]

Try this:

• create session - const cubeSession = await ConnectyCube.createSession()
• make auth to your BE and obtain IP_user_id and IP_token
• do login const user = ConnectyCube.login({login: IP_user_id, password: IP_user_id})

Show your logs for more information.

We tried this code in auth-service.js then we build the npm. But in cmd show that error. And also attached the screenshots

npm build error

auth-service.js

Console Log

[SANTHILADATABOT]

We inserted below lines in auth-service.js file for user signup. ConnectyCube.createSession({ login: "marvin18", password: "supersecurepwd" }); ConnectyCube.users.signup({ login: "marvin18", password: "supersecurepwd" });

but it shows the errors in console log like token is required. and also we attached the error image. please check it and let me know.

auth-service.js

Token is required error

But Token Generated

[SANTHILADATABOT]

*Important Doubt if it is necessary for a chat application to run a video chat application?

[ccvlad]

Try this:

• create session - const cubeSession = await ConnectyCube.createSession()
• make auth to your BE and obtain IP_user_id and IP_token
• do login const user = ConnectyCube.login({login: IP_user_id, password: IP_user_id})

Show your logs for more information.

We tried this code in auth-service.js then we build the npm. But in cmd show that error. And also attached the screenshots

npm build error

auth-service.js

Console Log

You should use await inside async function. You are also able to use promise function instead of async - await

We inserted below lines in auth-service.js file for user signup. ConnectyCube.createSession({ login: "marvin18", password: "supersecurepwd" }); ConnectyCube.users.signup({ login: "marvin18", password: "supersecurepwd" });

but it shows the errors in console log like token is required. and also we attached the error image. please check it and let me know.

auth-service.js

Token is required error

But Token Generated

There is impossible to create session with nonexistent user and the register this user.

1. Do not pass any params inside ConnectyCube.createSession() to create empty session (w/o user)
2. ConnectyCube.users.signup() register user in ConnectyCube - you don't need this.
3. You should set user ID as login and token as password in ConnectyCube.login() (user ID and token from your server - via custom identity provider) then ConnectyCube server will make an request to your server to verify and register after success response.

*Important Doubt if it is necessary for a chat application to run a video chat application?

Sorry, I haven't understood the question. Could you explain?

[SANTHILADATABOT]

As per your step 3 instruction, We modified in auth-service.js like below

ConnectyCube.createSession(); ConnectyCube.login({login: "marvin18", password: "supersecurepwd"});

but getting same error.

[SANTHILADATABOT]

We are installed only video chat application. Please let us know whether video application can be worked without chat application if not let us have your view

[ccvlad]

Seems we are confusing each other =)

Are you sure that you use Custom identity provider (CIdP) like in the guide? Does your server return success response?

"marvin18" is real user ID and "supersecurepwd" is token for auth on your back-end side?

we have an existing system which has existing login data, we want to use the data from this existing application and make them involve in video chat. we already tried https://developers.connectycube.com/guides/custom-identity-provider we still could not pass our users into connectycube

I always remember that you trying to login via CIdP. I just don't see any request which is related to the CIdP, because ConnectyCube.login(userParams) does a request call to ConnectyCube API as usual login. Maybe you need to signup new user directly in ConnectyCube?

[ccvlad]

We are installed only video chat application. Please let us know whether video application can be worked without chat application if not let us have your view

If I have understood you well... Yes. In this GitHub repository we have three samples. This samples are independent. Each sample has own package.json file and can be used w/o others.

[SANTHILADATABOT]

We don't know that how to send our users data to your server. https://developers.connectycube.com/guides/custom-identity-provider we are using this link follow those steps as per guide. but we did not clearly understand that.

we need a clear explanation for step 2 and 3 as per above link.

[SANTHILADATABOT]

We are able to run the web connectycube Video Chat sample code and we were able to get the Video Chat. Video chat worked with default users only. Now we need to know how we can use the sample code you have provided to us to get the user from our Database to get into VideoChat. I think we are placing the codes in the Wrong files.

As we have understood, this is what we have done

1. We are using the sample code for Video Chat with modification to the user details as we have created in the admin panel in the config.js file
2. So we need to know how to pass our users details in our live system
3. We have included all the codes you have given us inside auth-service.js file, is that right? or we need to place these codes in any other file?
4. I understand that each time we make a change we need to build NPM to make these changes reflect. Right now the code we inserted in auth-service.js has not allowed us build npm. The error we get is attached in the screen shot. We cannot find any folder called AppData created in our system to see the Log file.

[ccvlad]

First of all - did you configure your admin panel to use it with CIdP (Your implementation for user's auth)?

Also you can use the same data (login and password) to create new user without CIdP:

ConnectyCube.init(creds, config);
// to create new user
ConnectyCube.createSession()
  .then(session => {
    ConnectyCube.users.signup({ login: someLogin, password: somePwd })
      .then(user => console.log('User:', user))
      .catch(error => (
        if (error.code === 422) {
          // Already exist. Use "ConnectyCube.login({ login: someLogin, password: somePwd })".
        }
    ));
  });
// if user was created
ConnectyCube.createSession({ login: someLogin, password: somePwd })
  .then(session => console.log('Session with user:', session))
  .catch(error => console.error('Create session error:', error));

[ccvlad]

We are able to run the web connectycube Video Chat sample code and we were able to get the Video Chat. Video chat worked with default users only. Now we need to know how we can use the sample code you have provided to us to get the user from our Database to get into VideoChat. I think we are placing the codes in the Wrong files.

As we have understood, this is what we have done

1. We are using the sample code for Video Chat with modification to the user details as we have created in the admin panel in the config.js file
2. So we need to know how to pass our users details in our live system
3. We have included all the codes you have given us inside auth-service.js file, is that right? or we need to place these codes in any other file?
4. I understand that each time we make a change we need to build NPM to make these changes reflect. Right now the code we inserted in auth-service.js has not allowed us build npm. The error we get is attached in the screen shot. We cannot find any folder called AppData created in our system to see the Log file.

The error related to the Bable parser (npm module).

I saw your code, and I have pointed on your mistakes - https://github.com/ConnectyCube/connectycube-web-samples/issues/21#issuecomment-632024428

You can find information about Auth methods in our docs - https://developers.connectycube.com/js/authentication-and-users

[SANTHILADATABOT]

First of all - did you configure your admin panel to use it with CIdP (Your implementation for user's auth)?

Also you can use the same data (login and password) to create new user without CIdP:

ConnectyCube.init(creds, config);
// to create new user
ConnectyCube.createSession()
  .then(session => {
    ConnectyCube.users.signup({ login: someLogin, password: somePwd })
      .then(user => console.log('User:', user))
      .catch(error => (
        if (error.code === 422) {
          // Already exist. Use "ConnectyCube.login({ login: someLogin, password: somePwd })".
        }
    ));
  });
// if user was created
ConnectyCube.createSession({ login: someLogin, password: somePwd })
  .then(session => console.log('Session with user:', session))
  .catch(error => console.error('Create session error:', error));

We have already configured in admin panel

API URL : https://santhila.co/vc/ REQUEST HEADERS : {"Header-1": "#{login}", "Header-2": "#{password}"} REQUEST PARAMS : {"param_1": "#{login}", "param_2": "#{password}"} RESPONSE PARAMS :{"uid": "#{user.id}", "full_name": "#{user.full_name}", "email": "#{user.email}"}

[SANTHILADATABOT]

If we added user using ConnectyCube.users.signup({ login: someLogin, password: somePwd }) will the user information get display in the user list in connectycube admin ?https://admin.connectycube.com/apps/2491/service/users

[ccvlad]

Your main code for auth via CIdP will be:

ConnectyCube.init(creds, config);
// to create new user
ConnectyCube.createSession()
  .then(session => {
    ConnectyCube.login({ login: userIdForCIdP, password: someTokenForCIdP })
      .then(user => console.log('User:', user))
      .catch(error =>  console.log('Error:', error));
  });

You have to make sure that ConnectyCube.login() method sends request to your server. See in the browser console.

[SANTHILADATABOT]

Where to use this code and which file?

[ccvlad]

Where you want. Just check this code snippet. Then use the code for your auth.